- 什么是VUE
- 如何使用VUE
- MVVM
- 綁定原理
- 指令
一. 什么是VUE:
- 什么是:
(1). 第三方開(kāi)發(fā)的 —— 下載
(2). 基于MVVM設(shè)計(jì)模式的 ?
(3). 漸進(jìn)式的 —— 可以逐步在項(xiàng)目中使用vue的部分繼承箍铲。而不要求必須把整個(gè)項(xiàng)目都改為vue雇卷。
(4). 純前端js —— 只要有瀏覽器就可以運(yùn)行，和后端nodejs無(wú)關(guān)颠猴。
(5). 框架 —— 自動(dòng)化聋庵，避免大量重復(fù)勞動(dòng) - 為什么: 簡(jiǎn)化開(kāi)發(fā)，避免重復(fù)勞動(dòng)芙粱！
- 何時(shí): 今后祭玉，凡是以數(shù)據(jù)操作(增刪改查)為主的項(xiàng)目，都適合用vue等框架來(lái)實(shí)現(xiàn)春畔。
比如: 餓了么脱货，美團(tuán)岛都，滴滴，京東振峻，淘寶臼疫，頭條，知乎扣孟，微博... - 問(wèn)題:
(1). 兼容性問(wèn)題
(2). 難以接受
二. 如何使用:
-
下載: cn.vuejs.org
(1). 下載vue.js文件烫堤，引入HTML中使用:
a. 開(kāi)發(fā)版: 未壓縮版，包含完整的注釋?zhuān)a格式和見(jiàn)名知義的變量名凤价。而且鸽斟，還包含極其友好的錯(cuò)誤提示信息。
適合學(xué)習(xí)和開(kāi)發(fā)之用
b. 生產(chǎn)版: 壓縮版利诺，去掉了所有注釋?zhuān)a格式富蓄，極簡(jiǎn)化了變量名。而且慢逾，去掉了友好的錯(cuò)誤提示信息立倍。
適合生產(chǎn)環(huán)境上線(xiàn)使用。
(2). 安裝腳手架
_first_vue.html
圖片1.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--先引入vue.js-->
<script src="js/vue.js"></script>
</head>
<body>
<!--VUE 3步-->
<!--1. 先做界面: 3個(gè)要求
1.1 統(tǒng)一的要求: 界面中所有元素侣滩，都必須包裹在一個(gè)唯一的父元素下口注，習(xí)慣上<div id="app"></div>
1.2 找到界面中將來(lái)可能隨程序自動(dòng)變化的位置，用專(zhuān)門(mén)的語(yǔ)法:{{變量名}}來(lái)標(biāo)記/占位
本例中：君珠？
1.3 找到界面中將來(lái)可能觸發(fā)事件的元素寝志，用專(zhuān)門(mén)的語(yǔ)法: @事件名="事件處理函數(shù)名" 來(lái)標(biāo)記
本例中: ？-->
<div id="app">
<button @click="minus">-</button>
<span>{{n}}</span>
<button @click="add">+</button>
</div>
<script>
//2. 創(chuàng)建一個(gè)new Vue()對(duì)象葛躏，來(lái)監(jiān)控div所包含的區(qū)域。
var vm=new Vue({
//vue對(duì)象中悠菜，必須用el屬性舰攒，告訴new Vue()要監(jiān)控的區(qū)域是哪里: (el其實(shí)是element的縮寫(xiě))
// id選擇器
el:"#app",
//3. 定義模型對(duì)象，來(lái)保存界面中所需的所有變量和事件處理函數(shù)
//什么是模型對(duì)象: 就是專(zhuān)門(mén)替界面保存變量和事件處理函數(shù)的特殊的對(duì)象
//3.1 先創(chuàng)建一個(gè)data:{}來(lái)保存界面中所需的所有變量和初始值
//本例中: 因?yàn)榻缑嫔现恍枰粋€(gè)變量n悔醋，所以data中才需要1個(gè)變量n
data:{
n:0
},
//3.2 再創(chuàng)建一個(gè)methods:{}來(lái)保存界面中所需的所有事件處理函數(shù)
//本例中: 因?yàn)榻缑嬷行枰?個(gè)事件處理函數(shù)摩窃，所以methods中應(yīng)該定義兩個(gè)函數(shù)
methods:{
add(){
this.n++;
},
minus(){
if(this.n>0){
this.n--;
}
}
}
//強(qiáng)調(diào):
//3.2.1 methods中的事件處理函數(shù)中，如果要操作data中的變量芬骄，必須加this.
//3.2.2 methods中的事件處理函數(shù)中猾愿，根本不用考慮如何從界面取值，也不用考慮如何將新值放回界面账阻，只需要專(zhuān)門(mén)考慮如何把data中的變量值修改正確即可蒂秘！
//new Vue()會(huì)自動(dòng)保持界面中變量n和data中變量n同步:
//開(kāi)局時(shí)，data中n是幾淘太，new Vue()就把n的值送到頁(yè)面上姻僧，對(duì)應(yīng)位置顯示給人看
//當(dāng)methods中修改了n的值规丽，new Vue()會(huì)自動(dòng)把n的新值自動(dòng)更新到界面中n所在的位置給人看
});
console.log(vm);
</script>
</body>
</html>
三. MVVM:
1.舊的前端程序劃分為三部分:
(1). HTML: 專(zhuān)門(mén)定義網(wǎng)頁(yè)內(nèi)容
(2). CSS: 專(zhuān)門(mén)定義網(wǎng)頁(yè)內(nèi)容的樣式
(3). JS: 專(zhuān)門(mén)為網(wǎng)頁(yè)添加交互行為
- 問(wèn)題: HTML和CSS功能太弱，甚至不支持程序該有基本功能: 變量撇贺，運(yùn)算赌莺，分支、循環(huán)松嘶。所以艘狭，哪怕一點(diǎn)兒修改，都要麻煩js來(lái)操作翠订。導(dǎo)致js的任務(wù)量非常繁重巢音，且存在大量重復(fù)勞動(dòng)。
3. 解決: MVVM設(shè)計(jì)模式蕴轨，是對(duì)前端三大部分的重新劃分港谊。
(1). 界面(View):
a. 包括HTML+CSS
b. 增強(qiáng)版: 支持程序的基本功能: 變量，運(yùn)算橙弱，分支和循環(huán).
(2). 模型對(duì)象(Model):
a. 什么是: 專(zhuān)門(mén)替界面保存所屬的變量和函數(shù)的特殊對(duì)象
b. 今后歧寺，只要界面上需要用到哪些變量和函數(shù)時(shí)，都要保存在模型對(duì)象中
(3). 視圖模型(ViewModel)
a. 什么是: 專(zhuān)門(mén)自動(dòng)將模型對(duì)象中的變量和函數(shù)棘脐，自動(dòng)傳遞到界面上指定位置的特殊對(duì)象
b. 何時(shí): 今后斜筐，只要希望有人自動(dòng)將模型對(duì)象中的變量和函數(shù)自動(dòng)運(yùn)送到界面上，都要定義視圖模型蛀缝。
4. Vue框架如何實(shí)現(xiàn)MVVM設(shè)計(jì)模式的: Vue的綁定原理
(1). 創(chuàng)建new Vue()對(duì)象, 2件事:
a. 隱藏data中的原變量顷链，自動(dòng)為data中原變量創(chuàng)建訪(fǎng)問(wèn)器屬性。從此屈梁，在new Vue中使用的任何變量嗤练，其實(shí)都只能是訪(fǎng)問(wèn)器屬性。
b. 引入methods并打散methods為多個(gè)函數(shù)在讶。
1). 原methods中的函數(shù)煞抬，不再隸屬于methods，而是直接隸屬于new Vue()對(duì)象了
2). 所以构哺，methods中的函數(shù)打散后與訪(fǎng)問(wèn)器屬性平級(jí)革答，所以，methods中的方法曙强，想訪(fǎng)問(wèn)訪(fǎng)問(wèn)器屬性變量残拐，必須加this.
(2). new Vue()中el:"#app"在指引new Vue()對(duì)象去創(chuàng)建虛擬DOM樹(shù)
a. 掃描el屬性:"#app"所指的頁(yè)面區(qū)域的真實(shí)DOM樹(shù)，只找出可能發(fā)生變化的元素碟嘴，保存進(jìn)虛擬DOM樹(shù)中
b. 今后溪食，只要new Vue()中修改了變量，其實(shí)就是修改了訪(fǎng)問(wèn)器屬性娜扇。
1). 訪(fǎng)問(wèn)器屬性就會(huì)向虛擬DOM樹(shù)發(fā)出通知
2). 虛擬DOM樹(shù)掃描內(nèi)部所有可能發(fā)生變化的元素眠菇，找出受本次變量修改影響的個(gè)別元素边败。
3). 虛擬DOM樹(shù)利用內(nèi)部已經(jīng)封裝好的DOM操作，只修改頁(yè)面上受本次影響的元素捎废。不受本次影響的元素笑窜，不會(huì)改變。
(3). 總結(jié): Vue的綁定原理=訪(fǎng)問(wèn)器屬性+虛擬DOM樹(shù)
5. 虛擬DOM樹(shù)的優(yōu)點(diǎn):
(1). 小 —— 只包含受影響的元素
(2). 遍歷快
(3). 更新效率高—— 只更新受影響的元素登疗，不受影響的元素保持不變排截。
(4). 避免重復(fù)編碼—— 已經(jīng)封裝了DOM增刪改查操作，可自動(dòng)更新頁(yè)面內(nèi)容辐益。
四. 綁定語(yǔ)法: 學(xué)名: 插值語(yǔ)法 Interpolation
- 什么是: 專(zhuān)門(mén)在HTML語(yǔ)言中標(biāo)記可能發(fā)生變化的元素內(nèi)容的特殊語(yǔ)法
- 何時(shí): 今后跪削，只要一個(gè)元素的內(nèi)容库继，在程序執(zhí)行過(guò)程中，可能會(huì)被改變，都要用綁定語(yǔ)法來(lái)標(biāo)記
3. 如何: <元素>其它文本{{變量名}}其它文本</元素>
4. 結(jié)果:
(1). 首次加載頁(yè)面時(shí)撮执，new Vue()會(huì)自動(dòng)去data中查找同名的變量蛮拔，并將變量值眷蜈，替換{{}}所在的位置
(2). 今后只要在new Vue()中修改了{(lán){}}中的變量后怒炸，new Vue()都會(huì)自動(dòng)將變量的新值重新替換{{}}的位置。
- {{}}內(nèi)部: 和模板字符串的${}中規(guī)則一樣
(1). 可以放: 有返回值的語(yǔ)法正確的js表達(dá)式
比如: 變量, 算術(shù)計(jì)算, 三目, 訪(fǎng)問(wèn)數(shù)組元素, 創(chuàng)建對(duì)象, 調(diào)用方法牙瓢。
(2). 不可以放: 分支和循環(huán)以及沒(méi)有返回值的js表達(dá)式 - 示例: 使用綁定語(yǔ)法展示各種數(shù)據(jù):
_{{}}.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>Welcome {{uname}}</h3>
<h3>性別:{{sex==1?"男":"女"}}</h3>
<h3>小計(jì):￥{{(price*count).toFixed(2)}}</h3>
<h3>下單時(shí)間: {{new Date(orderTime).toLocaleString()}}</h3>
<h3>今天星期{{week[day]}}</h3>
</div>
<script>
new Vue({
el:"#app",
data:{
uname:"dingding",
sex:1,
price:12.5,
count:5,
orderTime:1614158191101,
week:["日","一","二","三","四","五","六"],
day:new Date().getDay()
}
})
</script>
</body>
</html>
運(yùn)行結(jié)果:
Welcome dingding
性別:男
小計(jì):￥62.50
下單時(shí)間: 2021/2/24下午5:16:31
今天星期二
五. 指令(directive):
- 問(wèn)題: 如果一個(gè)元素的屬性值隨程序自動(dòng)變化劫拗，則如果用{{}}標(biāo)記，會(huì)報(bào)錯(cuò)矾克！
- 解決: 今后页慷，只要元素的屬性可能發(fā)生變化，都要用"指令"來(lái)代替{{}}
3. vue中包括: 13種:
(1). v-bind:
a. 什么是: 專(zhuān)門(mén)用來(lái)標(biāo)記屬性值變化的特殊指令
b. 如何:
1). 標(biāo)準(zhǔn): <元素 v-bind:屬性名="變量或js表達(dá)式">
html地盤(pán) | js的地盤(pán) |
2). 簡(jiǎn)寫(xiě): <元素 :屬性名="變量或js表達(dá)式">
c. 原理: new Vue()只要掃描到":"胁附，就會(huì)先執(zhí)行=右側(cè)""中的js變量或表達(dá)式酒繁。然后用變量值或js表達(dá)式的運(yùn)行結(jié)果，作為當(dāng)前屬性的屬性值控妻！
d. 強(qiáng)調(diào):
1). 一旦屬性上加了:州袒，則不要再加{{}}了！""就起到了{(lán){}}的作用饼暑。
2). ""之內(nèi)變成了js的語(yǔ)法天下稳析！必須遵守js的語(yǔ)法洗做！
e. 示例: 根據(jù)pm25數(shù)值弓叛，顯示不同的圖片
4_v-bind.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>根據(jù)程序中PM25的數(shù)值顯示不同的表情</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--哪里可能隨程序自動(dòng)改變？-->
<img :src="pm25<100?'img/1.png':pm25<200?'img/2.png':pm25<300?'img/3.png':'img/4.png'">
<h3>{{pm25<100?'img/1.png':pm25<200?'img/2.png':pm25<300?'img/3.png':'img/4.png'}}</h3>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
//程序中只保存pm2.5的數(shù)值诚纸，不保存圖片路徑
pm25:160
}
})
//運(yùn)行后撰筷，F(xiàn)12打開(kāi)控制臺(tái)，console畦徘，輸入vm.pm25=數(shù)值毕籽，觀察頁(yè)面上圖片的變化.
</script>
</body>
</html>
(2). v-show:
a. 什么是: 專(zhuān)門(mén)根據(jù)條件控制一個(gè)元素的顯示隱藏
b. 如何: <元素 v-show="變量或js表達(dá)式">
c. 原理: new Vue()只要掃描到v-show抬闯，就會(huì)先執(zhí)行=右邊""中的變量或js表達(dá)式:
1). 如果=右邊的變量或js表達(dá)式結(jié)果為true，則當(dāng)前元素正常顯示
2). 如果=右邊的變量或js表達(dá)式結(jié)果為false关筒，則當(dāng)前元素隱藏（new Vue()自動(dòng)將v-show替換為display:none）溶握！
d. 示例: 點(diǎn)按鈕彈出框
5_v-show.html
<!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="js/vue.js"></script>
<style>
#pop{
position:fixed;
top:50%;
left:50%;
width:300px;
height:100px;
margin-left:-150px;
margin-top:-50px;
background-color:lightBlue
}
#pop>a{
float:right;
margin-right:20px;
text-decoration:none;
}
</style>
</head>
<body>
<!--VUE 3步
1. 做界面:
1.1 唯一父元素
1.2 找可能發(fā)生變化的元素
本例中：div的顯示隱藏狀態(tài)有可能變化
1.3 找觸發(fā)事件的元素
本例中:
button觸發(fā)事件，顯示對(duì)話(huà)框
a觸發(fā)事件蒸播，隱藏對(duì)話(huà)框
-->
<div id="app">
<button @click="show">click me</button>
<div v-show="visible" id="pop">
<a href="javascript:;" @click="hide">×</a>
</div>
</div>
<script>
//2. 創(chuàng)建new Vue()對(duì)象睡榆，監(jiān)控id為app的區(qū)域
new Vue({
el:"#app",
//3. 創(chuàng)建模型對(duì)象:
//3.1 創(chuàng)建data對(duì)象
//本例中: 只用到一個(gè)變量visible，所以
data:{
visible:false, //專(zhuān)門(mén)用來(lái)保存彈出框的顯示隱藏狀態(tài)袍榆。開(kāi)局胀屿，因?yàn)閺棾隹螂[藏，所以變量值為false包雀。
},
//3.2 創(chuàng)建methods對(duì)象
//本例中: 因?yàn)榻缑嫔闲枰?個(gè)事件處理函數(shù)宿崭，所以，methods中也應(yīng)該保存2個(gè)事件處理函數(shù)
methods:{
show(){
this.visible=true;
},
hide(){
this.visible=false;
}
}
})
</script>
</body>
</html>
(3). v-if和v-else:
a. 什么是: 專(zhuān)門(mén)根據(jù)條件在兩個(gè)元素之間二選一顯示隱藏
b. 如何:
<元素1 v-if="變量或js表達(dá)式">
<元素2 v-else>
強(qiáng)調(diào): v-if和v-else兩個(gè)元素之間必須緊挨著寫(xiě)才写，不能插入任何其他元素.
c. 原理: new Vue()掃描到v-if時(shí)葡兑，總是先執(zhí)行=右邊""中的變量和js表達(dá)式:
1). 如果v-if=右邊的變量或js表達(dá)式返回true，則顯示v-if所在的元素琅摩，而刪除v-else所在元素
2). 如果v-if=右邊的變量或js表達(dá)式返回false铁孵，則刪除v-if所在的元素，而保存v-else所在的元素
d. 問(wèn)題:為什么已經(jīng)刪除的元素房资，后來(lái)還能回到頁(yè)面上
原理: 每次刪除的指示真實(shí)DOM樹(shù)中的元素對(duì)象蜕劝。而虛擬DOM樹(shù)中始終同時(shí)保存著v-if和v-else兩個(gè)元素對(duì)象。每次變量發(fā)生變化時(shí)轰异，并不是直接掃描真實(shí)DOM樹(shù)岖沛，而是掃描虛擬DOM樹(shù)中兩個(gè)元素對(duì)象，決定這次派誰(shuí)上場(chǎng)搭独！
e. v-if和v-show的差別:
1). v-show: 用display:none隱藏元素
2). v-if: 用刪除元素方式來(lái)達(dá)到隱藏的目的
f. 示例: 切換登錄狀態(tài):
6_v-if_v-else.html
<!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="js/vue.js"></script>
</head>
<body>
<!--VUE 3步
1. 做界面
1.1 唯一父元素包裹
1.2 找可能發(fā)生變化的元素
本例中: 兩個(gè)div根據(jù)條件不同二選一顯示
1.3 找觸發(fā)事件的元素
本例中:
點(diǎn)擊登錄的a元素時(shí)婴削，切換為已登錄狀態(tài)
點(diǎn)擊注銷(xiāo)的a元素時(shí)，切換為未登錄狀態(tài)-->
<div id="app">
<!--已登錄時(shí)顯示-->
<!-- 記錄當(dāng)前用戶(hù)是否登錄-->
<div v-if="isLogin">
<h3>Welcome dingding <a href="javascript:;" @click="logout">注銷(xiāo)</a></h3>
</div>
<!--未登錄時(shí)顯示-->
<div v-else>
<a href="javascript:;" @click="login">登錄</a> |
<a href="javascript:;">注冊(cè)</a>
</div>
</div>
<script>
//2. 創(chuàng)建new Vue()
new Vue({
el:"#app",
//3. 創(chuàng)建模型對(duì)象
//3.1 創(chuàng)建data對(duì)象
//本例中：因?yàn)榻缑嫔闲枰?個(gè)變量牙肝，所以
data:{
isLogin:false,//記錄用戶(hù)是否登錄唉俗。開(kāi)局，用戶(hù)暫時(shí)未登錄配椭，所以初始值為false
},
//3.2 創(chuàng)建methods對(duì)象
//本例中：因?yàn)榻缑嬷行枰?個(gè)函數(shù)虫溜，所以
methods:{
login(){
//讓用戶(hù)變成已登錄狀態(tài)
this.isLogin=true;
},
logout(){
//讓用戶(hù)變回未登錄狀態(tài)
this.isLogin=false;
}
}
})
</script>
</body>
</html>
(4). v-else-if:
a. 什么是: 和v-if v-else配合來(lái)控制多個(gè)元素多選一顯示的特殊指令
b. 如何:
<元素1 v-if="條件1">
<元素2 v-else-if="條件2">
... ...
<元素n v-else>
c. 原理: new Vue()掃描到v-if時(shí)，先執(zhí)行=右邊的條件1股缸。
1). 如果條件1為true衡楞，則顯示v-if所在的元素，刪除之后所有v-else-if和v-else
2). 如果條件1為false敦姻，則先刪除v-if所在的元素瘾境，依次判斷v-else-if后的條件歧杏。只要有任何一個(gè)v-else-if條件滿(mǎn)足，則只保留這一個(gè)v-else-if所在的元素迷守，刪除其余元素
3). 如果所有v-if 和v-else-if的條件都不滿(mǎn)足犬绒，則刪除所有v-if和v-else-if所在元素，只保留v-else
d. 示例: 根據(jù)pm25值不同兑凿，顯示不同表情
7_v-else-if.html
<!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="js/vue.js"></script>
</head>
<body>
<div id="app">
<img v-if="pm25<100" src="img/1.png" alt="">
<img v-else-if="pm25<200" src="img/2.png" alt="">
<img v-else-if="pm25<300" src="img/3.png" alt="">
<img v-else src="img/4.png" alt="">
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
pm25:160
}
})
</script>
</body>
</html>
運(yùn)行結(jié)果:
(5). v-for:
a. 什么是: 專(zhuān)門(mén)根據(jù)一個(gè)數(shù)組的內(nèi)容反復(fù)生成多個(gè)相同結(jié)構(gòu)的HTML元素的特殊指令
b. 何時(shí): 今后懂更，只要希望根據(jù)一個(gè)數(shù)組中的元素內(nèi)容，來(lái)生成相應(yīng)個(gè)數(shù)的HTML元素急膀，都要用v-for沮协。
c. 如何: <要反復(fù)生成的元素 v-for="(元素值, 下標(biāo)i) of 數(shù)組">
強(qiáng)調(diào): of前的()中第一個(gè)變量必須接住值，第二個(gè)變量必須接住下標(biāo)/屬性名卓嫂。變量名可以隨便改慷暂，但是順序改不了。
d. 原理: new Vue()只要掃描到v-for晨雳，就會(huì)自動(dòng)遍歷of后的數(shù)組中每個(gè)元素行瑞。每遍歷一個(gè)元素，就自動(dòng)返回元素的內(nèi)容和下標(biāo)餐禁，保存到of前的兩個(gè)變量中血久。并且，每遍歷一個(gè)元素帮非， v-for都自動(dòng)創(chuàng)建一個(gè)當(dāng)前HTML元素的副本氧吐。遍歷了數(shù)組中的幾個(gè)元素，最終就會(huì)反復(fù)創(chuàng)建幾個(gè)相同結(jié)構(gòu)的HTML元素副本末盔。
e. v-for還能遍歷對(duì)象中每個(gè)屬性:
1). 其實(shí)vue中的v-for統(tǒng)一了js中for of和for in的功能
2). 其實(shí)v-for="(元素值, 下標(biāo)i) in 數(shù)組/對(duì)象"
3). 其實(shí)寫(xiě)in和寫(xiě)of完全一樣筑舅！都是既能遍歷索引數(shù)組，又能遍歷對(duì)象中的屬性陨舱。
f. VUE2的兩個(gè)著名的坑:
1). 如果使用"數(shù)組[下標(biāo)]=新值"方式來(lái)修改數(shù)組中某個(gè)位置的元素翠拣，則即使數(shù)組內(nèi)容可以修改成功，那么頁(yè)面也不會(huì)跟著自動(dòng)變化
原因: vue中并沒(méi)有給數(shù)組中的數(shù)字下標(biāo)添加任何訪(fǎng)問(wèn)器屬性游盲，所以vue中所有數(shù)字下標(biāo)误墓，都是不受監(jiān)控的！
臨時(shí)解決: 所有對(duì)數(shù)組的修改益缎，不要用下標(biāo)來(lái)做谜慌。用數(shù)組類(lèi)型提供的那些API函數(shù)來(lái)實(shí)現(xiàn)。
比如: 想修改數(shù)組中1位置的元素值為新值:
錯(cuò)誤: 數(shù)組[1]=新值
正確: 數(shù)組.splice(1,1,新值)
從1位置刪除1個(gè)元素
再將新值插入到1位置——完成替換
將來(lái)解決: 升級(jí)到VUE3链峭，自動(dòng)解決了.
2). 在運(yùn)行時(shí)畦娄，為對(duì)象添加新屬性又沾，則新屬性不會(huì)自動(dòng)更新界面弊仪。
原因: VUE2的new Vue()只能對(duì)開(kāi)局時(shí)對(duì)象中現(xiàn)有的屬性自動(dòng)添加訪(fǎng)問(wèn)器屬性熙卡。而，將來(lái)在運(yùn)行時(shí)励饵，由程序動(dòng)態(tài)添加的屬性驳癌，都無(wú)法實(shí)時(shí)自動(dòng)獲得訪(fǎng)問(wèn)器屬性。所以役听，又會(huì)出現(xiàn)不受監(jiān)控的屬性
解決: 只能升級(jí)VUE3
g. v-for的問(wèn)題:
1). v-for很蠢颓鲜，即使我們?cè)诔绦蛑兄恍薷牧艘粋€(gè)元素值，因?yàn)関-for無(wú)法區(qū)分頁(yè)面上的HTML元素典予，所以甜滨，只能刪除整個(gè)列表，重建整個(gè)列表瘤袖∫履Γ——效率低
2). 根本原因: v-for反復(fù)生成的多個(gè)HTML元素副本，沒(méi)有差別捂敌！
3). 解決: vue規(guī)定艾扮，今后只要使用v-for，都必須為元素同時(shí)綁定:key屬性占婉，且屬性值應(yīng)該是一個(gè)不重復(fù)的下標(biāo)或?qū)傩悦?br>
4). 如何:
<元素 v-for="(元素值, 下標(biāo)i) of 數(shù)組" :key="下標(biāo)i">
5). 原理:
i. 今后泡嘴，v-for每創(chuàng)建一個(gè)HTML元素副本，都會(huì)綁定一個(gè)key屬性逆济，屬性值為數(shù)組中一個(gè)不重復(fù)的下標(biāo)
ii. 今后酌予，當(dāng)更新數(shù)組中某一個(gè)元素時(shí)，v-for就可根據(jù)HTML元素上綁定的唯一的key屬性值奖慌，只找到對(duì)應(yīng)的一個(gè)HTML元素霎终，修改其內(nèi)容即可。不會(huì)更新列表——效率高升薯！
6). 總結(jié): v-for為什么必須帶:key
為每個(gè)元素添加唯一標(biāo)識(shí)莱褒，避免更新一個(gè)元素時(shí)重建整個(gè)列表.
h. 示例: 使用v-for遍歷索引數(shù)組和對(duì)象
8_v-for.html
<!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="js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>遍歷數(shù)組中每個(gè)元素</h3>
<ul>
<li v-for="(str,i) of arr" :key="i">
{{i+1}} - {{str}}
</li>
</ul>
<h3>遍歷對(duì)象中每個(gè)屬性</h3>
<ul>
<li v-for="(屬性值, 屬性名) of lilei" :key="屬性名">{{屬性名}} - {{屬性值}}</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
arr:["亮亮","楠楠","東東"],
lilei:{
sname:"Li Lei",
sage:11,
class:"初一2班"
}
}
})
//1. vm.arr[1]="濤濤" //修改不成功
//2. vm.arr.splice(1,1,"濤濤") //成功
//3. vm.lilei.money=100 //沒(méi)成功
</script>
</body>
</html>
運(yùn)行結(jié)果:
遍歷數(shù)組中每個(gè)元素
?1 - 亮亮
?2 - 楠楠
?3 - 東東
遍歷對(duì)象中每個(gè)屬性
?sname - Li Lei
?sage - 11
class - 初一2班
i. 其實(shí)v-for也可以根據(jù)一個(gè)整數(shù)反復(fù)生成指定個(gè)數(shù)的HTML元素.
1). <元素 v-for="i of 整數(shù)" :key="i">
2). 原理: v-for會(huì)自動(dòng)從1開(kāi)始，連續(xù)數(shù)數(shù)涎劈，數(shù)到給定的整數(shù)結(jié)束广凸。每數(shù)一個(gè)數(shù)，就自動(dòng)創(chuàng)建當(dāng)前HTML元素的一個(gè)副本蛛枚。
3). 示例: 生成分頁(yè)按鈕
9_v-for_pages.html
<!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="js/vue.js"></script>
<style>
ul{
list-style: none;
}
ul>li{
float:left;
width:40px;
height:40px;
text-align:center;
line-height:40px;
border:1px solid #555;
border-radius: 5px;
margin-left:5px;
}
ul>li:hover{
cursor:pointer;
background-color:lightskyblue;
color:#fff;
border:0;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="i of pageCount" :key="i">{{i}}</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
pageCount:10 //共6頁(yè)
}
})
</script>
</body>
</html>
運(yùn)行結(jié)果:
常見(jiàn)錯(cuò)誤: Error compiling template : 模板編譯錯(cuò)誤
通常因?yàn)镠TML中所寫(xiě)的HTML標(biāo)簽或綁定語(yǔ)法不符合vue的要求了谅海！
進(jìn)一步確定出錯(cuò)的位置:
沿控制臺(tái)左側(cè)向下找，跳過(guò)大片的HTML代碼蹦浦，找到一個(gè)很短的"-"扭吁，這里標(biāo)記的就是出錯(cuò)的位置！
總結(jié):
1. MVVM: 界面View+模型Model+視圖模型ViewModel
2. Vue綁定原理: 訪(fǎng)問(wèn)器屬性+虛擬DOM樹(shù)
變量被修改時(shí): 訪(fǎng)問(wèn)器屬性發(fā)出通知，虛擬DOM樹(shù)掃描并僅更新受影響的元素
3. 虛擬DOM樹(shù)優(yōu)點(diǎn):
(1). 小: 只包含可能變化的元素侥袜。
(2). 遍歷查找快
(3). 修改效率高: 只修改受影響的元素蝌诡。
(4). 避免重復(fù)編碼: 已封裝DOM增刪改查代碼
4. Vue功能3步:
(1). 先創(chuàng)建增強(qiáng)版的界面:
a. 整個(gè)界面必須包含在一個(gè)唯一的父元素下:
通常是<div id="app">
b. 可能變化的元素內(nèi)容用{{自定義變量名}}標(biāo)記
c. 觸發(fā)事件的元素用@click="自定義處理函數(shù)名"標(biāo)記
(2). 再創(chuàng)建new Vue()對(duì)象,其中el:指向new Vue()要監(jiān)控的頁(yè)面區(qū)域
(3). 在new Vue()對(duì)象內(nèi)定義模型對(duì)象data和methods
a.界面所需的所有變量都放在data中
b.界面所需的所有事件處理函數(shù)都放在methods中
5. 總結(jié): 綁定語(yǔ)法+13種指令
(1). 如果元素的內(nèi)容需要隨變量自動(dòng)變化: {{}}
(2). 如果元素的屬性值需要隨變量自動(dòng)變化: :
(3). 控制一個(gè)元素顯示隱藏: v-show
(4). 控制兩個(gè)元素二選一顯示: v-if v-else
(5). 多個(gè)元素多選一顯示: v-if v-else-if v-else
(6). 只要反復(fù)生成多個(gè)相同結(jié)構(gòu)的元素組成列表時(shí): v-for :key="唯一標(biāo)識(shí)"
