官方網站下載打印機驅動程序手機百度安裝下載
vue
一.vue3介紹
1.為什么data是函數而不是對象?
因為vue是組件開發(fā),組件會多次復用,data如果是對象,多次復用是共享,必須函數返回一個新的對象
1. 官網初識
Vue (發(fā)音為 /vju?/，類似 view) 是一款用于構建用戶界面的 JavaScript 框架。它基于標準 HTML、CSS 和 JavaScript 構建，并提供了一套聲明式的、組件化的編程模型，幫助你高效地開發(fā)用戶界面。無論是簡單還是復雜的界面，Vue 都可以勝任。
https://cn.vuejs.org/
2.環(huán)境搭建
2.1線上嘗試
2.2CDN使用
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
通過 CDN 使用 Vue 時，不涉及“構建步驟”。這使得設置更加簡單，并且可以用于增強靜態(tài)的 HTML 或與后端框架集成。但是，你將無法使用單文件組件 (SFC) 語法。
2.3 Vue CLI(不太使用)
Vue CLI 是官方提供的基于 Webpack 的 Vue 工具鏈，它現(xiàn)在處于維護模式。我們建議使用 Vite 開始新的項目，除非你依賴特定的 Webpack 的特性。在大多數情況下，Vite 將提供更優(yōu)秀的開發(fā)體驗。
2.4 Vite
Vite 是一個輕量級的、速度極快的構建工具，對 Vue SFC 提供第一優(yōu)先級支持。作者是尤雨溪，同時也是 Vue 的作者！
要使用 Vite 來創(chuàng)建一個 Vue 項目，非常簡單：
$ npm init vue@latest
這個命令會安裝和執(zhí)行 create-vue，它是 Vue 提供的官方腳手架工具。跟隨命令行的提示繼續(xù)操作即可。
二.vue3基礎
1.模版語法
1-1我的第一個應用
<div id="box">{{10+20}}//30{{myName}}//yiling
</div>
<script>var obj={data(){return{myName:'yiling'}}}var app=Vue.createApp(obj).mount("#box")
</script>
- 推薦使用的 IDE 是 VSCode，配合 Vue 語言特性 (Volar) 插件。該插件提供了語法高亮、TypeScript 支持，以及模板內表達式與組件 props 的智能提示。
- Volar 取代了我們之前為 Vue 2 提供的官方 VSCode 擴展 Vetur。如果你之前已經安裝了 Vetur，請確保在 Vue 3 的項目中禁用它。
1-2應用背后的真相
-
object.defineProperty
缺陷:無法監(jiān)聽數組的變化,無法監(jiān)聽class的改變,無法監(jiān)聽Map Set結構
<div id="box"></div> <script>var obj={}var oBox=document.getElementById("box")Object.defineProperty(obj,'myname',{get(){console.log("get");},set(value){console.log("set",value);// 操作domoBox.innerHTML=value}}) </script> -
proxy
var obj = {} var obox = document.getElementById("box")var vm = new Proxy(obj, {get(target, key) {console.log("get")return target[key]},set(target, key, value) {console.log("set")target[key] = valueobox.innerHTML = value} })/*vue3 基于Proxy ,ES6 Proxy ,if(支持proxy){// proxy進行攔截處理， 實現(xiàn)功能}else{// object.defineProtery}*/
1-3模版語法
-
最基本的數據綁定形式是文本插值,它使用的是"Mustache"語法(即雙大括號)
{{myName}}雙大括號會被替換為相應組件實例中myName屬性的值,同時每次myName屬性更新時他也會同步更新
-
雙大括號不能在 HTML attributes (屬性)中使用。想要響應式地綁定一個 attribute(屬性)，應該使用
v-bind指令：<div v-bind:id="dynamicId"></div>v-bind指令指示 Vue 將元素的idattribute 與組件的dynamicId屬性保持一致。如果綁定的值是null或者undefined，那么該 attribute 將會從渲染的元素上移除。 -
表達式的支持
{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div :id="`list-${id}`"></div> -
指令
<a v-on:click="doSomething"> ... </a><!-- 簡寫 --> <a @click="doSomething"> ... </a>
1-4Todolist案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script>
</head>
<body><div id="box"><input type="text" v-model='val'><button @click="add()">添加 </button><ul><li v-for="item,index in todos">{{item}}<button @click="del(index)">刪除</button></li></ul><div v-show="todos.length==0">暫時沒有待辦事項</div></div><script>var obj={data() {return {val:'',todos:[]}},methods:{add(){if(this.val.trim()!==''){this.todos.push(this.val.trim())this.val=''}},del(index){this.todos.splice(index,1)}}}var app=Vue.createApp(obj).mount("#box")</script>
</body>
</html>
1-5點擊變亮案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script><style>.active{color: red;}</style>
</head>
<body><div id="box"><ul><li v-for="item,index in list" :class="current==index?'active':''" @click="add(index)">{{item}}</li></ul></div><script>var obj={data() {return {current:0,list:['電影','影院','我的']}},methods: {add(index){this.current=index}},}var app=Vue.createApp(obj).mount('#box')</script>
</body>
</html>
1-6 v-html模版陷阱
雙大括號會將數據解釋為純文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：
<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
2.class與style
class對象與數組寫法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script>
</head>
<body><div id="box"><div :class="objClass">動態(tài)切換class--對象</div><div :class="arrClass">動態(tài)切換class--數組</div></div><script>var obj={data() {return {// vue2不支持,后來添加新屬性// vue3支持objClass:{aaa:true,bbb:false,ccc:true},arrClass:['aaa','bbb','ccc']}},}var app=Vue.createApp(obj).mount('#box')</script>
</body>
</html>
style對象與數組寫法,同上
把class改成style
3.條件渲染
3-1 條件渲染-生或死的選擇
v-if 是“真實的”按條件渲染，因為它確保了在切換時，條件區(qū)塊內的事件監(jiān)聽器和子組件都會被銷毀與重建。
v-if 也是惰性的：如果在初次渲染時條件值為 false，則不會做任何事。條件區(qū)塊只有當條件首次變?yōu)?true 時才被渲染。
相比之下，v-show 簡單許多，元素無論初始條件如何，始終會被渲染，只有 CSS display 屬性會被切換。
總的來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要頻繁切換，則使用 v-show 較好；如果在運行時綁定條件很少改變，則 v-if 會更合適。
<ul ><li v-for="item,index in datalist">{{item.title}}<div v-if="item.state===0">未付款</div><div v-else-if="item.state===1">未發(fā)貨</div><div v-else-if="item.state===2">已發(fā)貨</div><div v-else>已完成</div></li>
</ul>datalist:[{state:0,title:"111"},{state:1,title:"222"},{state:2,title:"333"}
]
4.列表渲染
4-1 v-for列表渲染 - 影分身術
v-for與對象
data() {return {myObject: {title: 'How to do lists in Vue',author: 'Jane Doe',publishedAt: '2016-04-10'}}
}
<ul><li v-for="value in myObject">{{ value }}</li>
</ul>
<ul ><template v-for="{title,state},index in datalist" ><li v-if="state===1">{{title}}</li> </template>
</ul>