官方網站下載打印機驅動程序手機百度安裝下載
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 將元素的id
attribute 與組件的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>