5.1. 基本指令
5.1.1. v-cloak
一般與display：none進(jìn)行結(jié)合使用
作用：解決初始化慢導(dǎo)致頁面閃動的最佳實踐
上面的代碼整以，當(dāng)運(yùn)行的時候，實際上是先在頁面上顯示v-cloak和{{msg}}，然后當(dāng)運(yùn)行到vue實例的時候刹淌，將{{msg}}渲染成’ 這是一段文字’寿羞，也就是說如果你的網(wǎng)速慢的話，你就會看到{{msg}}然后他會閃動一下渲染成’這是一段文字’衍腥，解決辦法：
5.1.2. v-once
定義它的元素和組件只渲染一次
上面的msg屬性，我們可以在控制臺對它的數(shù)據(jù)進(jìn)行修改纳猫，讓它重新渲染
但是使用v-once就只讓它渲染一次婆咸，也就是初始化的時候你給的那個值，當(dāng)你再次修改芜辕，它將不會再去渲染
<span v-once>{{msg}}</span>
5.2. 條件渲染指令
5.2.1. v-if, v-eles-if ,v-else
v-if后接的是等號：等號后的內(nèi)容必須是布爾值
v-if的基本用法：
<div id="app">
<p v-if="6<3">{{apple}}</p>
<p v-else-if="6>3">{{orange}}</p>
<p v-else>{{banner}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
apple: '蘋果',
orange: '橘子',
banner: '香蕉'
}
})
</script>
v-if的弊端 : Vue在渲染元素時,出于效率考慮尚骄，會盡可能地復(fù)用已有的元素而非重新渲染，因此會出現(xiàn)烏龍
如：
上面的代碼侵续，當(dāng)點(diǎn)擊button時倔丈，會切換密碼和姓名那個div的顯示憨闰，
但是當(dāng)我在姓名里面輸入一個名字，點(diǎn)擊按鈕切換到密碼需五，這個名字還是存在起趾，也就是說這個input框并沒有重新渲染，還是復(fù)用了之前的
解決辦法：給你不需要復(fù)用的元素加一個唯一的key警儒，提供key值可以來決定是否復(fù)用該元素
5.2.2. v-show
<p v-show="9>a">我被顯示</p>
data: {
a: 4
}
當(dāng)你將a的值改為大于9的數(shù)的時候训裆，p隱藏了，但只是display變了
v-if和v-show的比較
v-if: 實時渲染蜀铲，頁面顯示就渲染边琉，不顯示，我就給你移除
如果在初始渲染時條件為假记劝，則什么也不做——直到條件第一次變?yōu)檎鏁r变姨，才會開始渲染，而v-show不管初始條件是什么厌丑，元素總是會被渲染定欧，并且只是簡單地基于 CSS 進(jìn)行切換。所以牽扯到獲取數(shù)據(jù)的操作需要用v-if怒竿。
比如上面那個切換姓名和密碼的案例砍鸠，當(dāng)前如果顯示的是姓名，那么就只渲染姓名這一部分耕驰，密碼就會被移除爷辱，反之，相同
v-show: v-show的元素永遠(yuǎn)存在頁面中朦肘，只是改變了css的display的屬性
- v-if讓元素出現(xiàn)/不出現(xiàn)在頁面饭弓；v-show只是style的顯示和隱藏，一直在頁面
- 對于一個組件來說媒抠，v-if為false的時候是不會去渲染的弟断，也就是說只會執(zhí)行beforeDestroy和destroyed鉤子（如果初始化的時候是false那就什么鉤子都不執(zhí)行），v-if為true的時候才會去渲染趴生，執(zhí)行其他的鉤子
<body>
<div id="app">
<my-a v-if="open"></my-a>
<button @click="open = !open">點(diǎn)我</button>
</div>
<script>
new Vue({
el: '#app',
data: {
open: false
},
components: {
'my-a': {
template: `
<div>aaa</div>
`,
beforeCreate(){
console.log('beforecreate')
},
created(){
console.log('created')
},
beforeMount(){
console.log('beforeMount')
},
mounted(){
console.log('mounted')
},
beforeUpdate(){
console.log('beforeUpdate')
},
updated(){
console.log('updated')
},
beforeDestroy(){
console.log('beforeDestory')
},
destroyed(){
console.log('destoryed')
}
}
}
})
</script>
</body>
上面的代碼如果是頁面初始化灾部，就什么也不會打印茅茂，當(dāng)點(diǎn)擊按鈕時v-if為true赶掖，就會打印出beforecreate/created/beforeMount/mounted镊靴，然后再次點(diǎn)擊v-if為false就會打印出beforeDestory/destoryed
5.3. 列表渲染指令v-for
用法: 當(dāng)需要將一個數(shù)組遍歷或枚舉一個對象屬性的時候循環(huán)顯示時，就會用到列表渲染指令v-for锉桑。
兩種使用場景：
- 遍歷多個對象
- 遍歷一個對象的多個屬性
<div id="app">
v-for的用法：v-for一定是寫在要遍歷的元素上，v-for后接等號窍株，類似于item in items
（1） 遍歷多個對象（遍歷數(shù)組）：
<ul>
<li v-for="todo in todos">{{todo.name}}</li>
</ul>
帶索引的寫法：括號的第一個是變量民轴，代表item攻柠，第二個是index
<ul>
<li v-for="(todo,index) in todos">
{{index}}--{{todo.name}}
</li>
</ul>
（2） 遍歷一個對象的多個屬性：
<ul>
<li v-for="value in nvshen">{{value}}</li>
</ul>
拿到value,key,index的寫法 v-k-i
<ul>
<li v-for="(value,key,index) in nvshen">
{{index}}--{{key}}--{{value}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
todos: [
{name: 'lin',age:21},
{name: 'yong',age:28},
{name: 'ke', age:22}
],
nvshen: {
girl1: '趙麗穎',
girl2: '迪麗熱吧',
girl3: '宋祖兒'
}
}
})
</script>
v-for后面如果遍歷的是一個數(shù)字，那么就代表從1到這個數(shù)字
<ul>
//這里就會有4個li后裸，list就是1瑰钮，2，3微驶，4
<li v-for="list in 4">{{list}}</li>
</ul>
v-for使用時一定要指定唯一的key（key必須用id）否則會造成組件bug
https://jsbin.com/daholiyilo/edit?html,js,output
<div id="app">
<ul>
<li v-for="(item,index) in items">
<child>
</child>
<button @click="remove(index)">刪除</button>
</li>
</ul>
<button @click=add>add</button>
</div>
上面的代碼浪谴，當(dāng)我們對第一個點(diǎn)擊刪除的時候，我們以為會留下一個true和false因苹，但是實際上是兩個true
刪除第一個后
這里以123為例苟耻，當(dāng)我們刪除1的時候有兩種可能
1). 把1刪除，剩下2和3
2). 第1變成了2扶檐，2變成了3凶杖，然后把3刪掉了
而我們上面的結(jié)果明顯就是第2種，當(dāng)我們點(diǎn)擊第一個款筑，他以為我們刪的是第三個智蝠，解決方法就是給每一個加一個唯一的key
<ul>
<li v-for="(item,index) in items" :key="item.id">
<child>
</child>
<button @click="remove(index)">刪除</button>
</li>
</ul>
這樣當(dāng)我們刪除第一個的時候，vue就會發(fā)現(xiàn)第一項的id沒了奈梳，然后現(xiàn)在第一項的id是以前第二項的id杈湾，所以它就知道了不是把1變成了2，而是直接把1刪了攘须，這里還要注意如果這里的key用的是index毛秘，那我刪除第一個后，index還是0和1那就意味著我刪除的是第三個阻课，所以key必須用id
5.4. 數(shù)組更新叫挟，過濾與排序
<div id="app">
<ul>
<li v-for="num in arr">{{num}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
arr: ['one','two','three']
}
})
</script>
執(zhí)行上面代碼，頁面顯示
改變數(shù)組的一系列方法：
? push() 在末尾添加元素限煞，返回數(shù)組當(dāng)前的長度
? pop() 將數(shù)組的最后一個元素移除抹恳，返回這個元素
? shift() 刪除數(shù)組的第一個元素
? unshift（）：在數(shù)組的第一個元素位置添加一個元素
splice()：可以添加或者刪除，返回刪除的元素
三個參數(shù)：
- 第一個參數(shù)：表示開始操作的位置
- 第二個參數(shù)表示：要刪除的長度
- 第三個為可選參數(shù)：當(dāng)有第三個參數(shù)的時候署驻，若第二個參數(shù)為0就是添加一個元素
上面的代碼就是刪除第一個元素one
上面的代碼因為第二個參數(shù)為0奋献，所以不刪除，也就是在索引值為0的位置添加一個one旺上，因為沒有刪除瓶蚂，所以返回一個空數(shù)組
? sort（）：排序
? reverse()：顛倒
當(dāng)點(diǎn)擊數(shù)組排序按鈕就會調(diào)用sort方法，按長度升序排列
點(diǎn)擊數(shù)組翻轉(zhuǎn)的時候正好反過來
兩個數(shù)組變動vue檢測不到:
- 改變數(shù)組的指定項
- 改變數(shù)組長度
<button @click="changeOne">改變第一個</button>
<button @click="changeLength">改變數(shù)組的長度</button>
changeOne(){
this.arr[0]='dask'
},
changeLength(){
this.arr.length = 1
}
上面的操作不會起任何作用
解決辦法：
改變數(shù)組指定項：set(要操作的數(shù)組宣吱，索引號窃这，修改的內(nèi)容)
Vue.set(app.arr,1,'dask')
修改數(shù)組長度：splice
splice后面直接跟一個參數(shù)，那就是要修改的長度
app.arr.splice(1)
上面代碼arr的長度變成了1
過濾filter
返回數(shù)組中含有oo的項{{matchOO}}
data: {
arr: ['pen','pencil','book']
},
computed: {
matchOO:function(){
//book參數(shù)代表要過濾的數(shù)組里的每一項
return this.arr.filter(function(book){
return book.match(/oo/)
})
}
}
最后頁面顯示[“book”]
5.5. 方法和事件
5.5.1. 基本用法
如果方法中傳入了參數(shù)征候，那么調(diào)用你綁定的事件里面使用那個方法必須加括號杭攻，上面的代碼祟敛，如果你沒加括號，它就會默認(rèn)傳入了一個原生事件對象event作為參數(shù)
5.5.2.修飾符
在vue中傳入event對象用 $event
向上冒泡 stop:阻止單擊事件向上冒泡
<div @click="oneEvent" class="box">
<button @click.stop="twoEvent">點(diǎn)擊按鈕</button>
</div>
prevent:提交事件并且不重載頁面（寫在需要提交的表單form上）
<form action="" @submit.prevent>
<input type="submit" value="提交">
</form>
self:只是作用在元素本身而非子元素的時候調(diào)用
<div @click.self="oneEvent" class="box">
<button @click="twoEvent">點(diǎn)擊按鈕</button>
</div>
上面給父元素添加了self當(dāng)前的事件就只作用在他自己本身兆解，不作用它的子元素了
once: 只執(zhí)行一次的方法
<button @click="handle">無限次的執(zhí)行</button>
<button @click.once="handle">只執(zhí)行一次</button>
加了once后handle函數(shù)只會執(zhí)行一次馆铁，不加你每點(diǎn)擊一次就會執(zhí)行一次
可以監(jiān)聽鍵盤事件： ——指定的keyCode
<input type="text" @keyup.13="submitMe">
submitMe(){
alert('你按下了enter鍵')
}
但你input獲取焦點(diǎn)后，你按下回車他就會執(zhí)行submitMe锅睛，打印出你按下了enter鍵
