v-cloak（插值表達(dá)式）
使用v-cloak能夠解決插值表達(dá)式的閃爍問題
如：<p>{{ msg }}</p>，在Vue實例中data中的msg值為‘123’
在網(wǎng)速很慢的情況下，<script>標(biāo)簽的請求速度也會很慢，我們會看到在這個時候會渲染出{{ msg }}再渲染出123
而在<p>標(biāo)簽里面添加v-cloak屬性
<p v-cloak>{{ msg }}</p>
再在css里面設(shè)置
[v-cloak]{
display:none;
}
可以解決這個問題
原理：
vue.js頁面加載完成后，會自動去除v-cloak的css樣式，也就是說對應(yīng)的p標(biāo)簽變?yōu)榭梢娏?/p>
v-text
v-text與使用雙向數(shù)據(jù)綁定{{ msg }}的作用相似，但各有優(yōu)缺點
如：
<p v-text="msg"></p>
優(yōu)點：默認(rèn)v-text是沒有閃爍問題的
缺點：v-text會覆蓋原本元素內(nèi)的innerHTML的值
如：
<p v-text="msg">Hello,Vue！</p>
msg中的值會覆蓋掉<p>標(biāo)簽對里面innerHTML的值
而v-cloak可以在<p>標(biāo)簽對里面靈活添加內(nèi)容
如：
<p v-cloak>hello{{ msg }}hello</p>
[v-cloak]{
display:none;
}
結(jié)果<p>的結(jié)果會顯示hello123hello
v-html
把屬性的值解析成html，也存在覆蓋掉原本內(nèi)容的情況
假如有
msg:'<h1>Hello,Vue！</h1>'
我們想只顯示Hello,Vue！這個結(jié)果，就必須使用v-html
使用v-text或者是使用插值表達(dá)式{{ msg }}的話會輸出<h1>Hello,Vue！</h1>這個結(jié)果，v-text把msg解析的值的全部內(nèi)容都解析成了一個字符串
v-bind
v-bind: 是Vue中用于綁定屬性的指令
假如有
<input type="button" value="按鈕" title="mytitle" />
這時候當(dāng)鼠標(biāo)移動到該按鈕的時候，按鈕上會顯示mytitle這個字符串
但是有一種情況就是：
mytitle是我在data里面自定義的變量，mytitle：'hello'
想要輸出的是hello，就需要加上v-bind: 指令
<input type="button" value="按鈕" v-bind: title="mytitle" />
這時候，v-bind會把""里面的東西解析成js表達(dá)式，如：
<input type="button" value="按鈕" v-bind: title="mytitle + ‘123’" />
也是可以的
注：v-bind: 還可以縮寫成：
<input type="button" value="按鈕" : title="mytitle" />
v-on
Vue中提供了v-on: 事件綁定機(jī)制(v-on是用來綁定事件的)
一般情況下，我們定義一個事件，需要在元素內(nèi)為它設(shè)置一個id號，然后通過document.getElementById("xxx").onclick = function(){}
但是這就違背了Vue設(shè)計的初衷，Vue就是為了減少DOM操作而設(shè)計出來的，Vue不提倡我們操作DOM
這時候我們可以v-on:事件名="方法名"
這個方法名需要在Vue里面的methods屬性下定義
methods{
????方法名: function(){
? ? ? ? alert("hello");
????}
}
v-on也有縮寫，縮寫為@，如：@: 事件名="方法名"
v-model
v-model實現(xiàn)表單元素（View層）和Vue實例中的data（Model層）的雙向數(shù)據(jù)綁定
也就是說View層數(shù)據(jù)發(fā)生改變，Model層的數(shù)據(jù)也會發(fā)生改變；Model層數(shù)據(jù)發(fā)生改變，View層的數(shù)據(jù)也會發(fā)生改變；
注：v-model只能用在表單元素中
v-model和v-bind的主要區(qū)別在于：
v-bind只能實現(xiàn)Model層到View層的數(shù)據(jù)綁定，
而v-model可以實現(xiàn)雙向數(shù)據(jù)綁定
v-for
v-for在Vue中的主要作用是循環(huán)
一、普通數(shù)組的循環(huán)渲染
在data是聲明一個數(shù)組
list: [1,2,3,4,5,6]
假如我們想在<p>標(biāo)簽中循環(huán)輸出該數(shù)組，可以使用v-for指令，如：
<p v-for="(item,i) in list">索引值：{{ i }}，數(shù)組每一項的值：{{ item }}</p>
二、對象數(shù)組的循環(huán)渲染
或者有數(shù)組
list:[
? ? {id: 1, name, zhang},
? ? {id: 2, name: wang},
? ? {id: 3, name: chen},
????{id: 4, name: wu},
]
還是輸出他們的值，如：
<p v-for="user in list">{{ user.id }}----------{{ user.name }}</p>
三、循環(huán)對象
在data中有
data：{
? ? user：{
? ? ? ? id：1，
????????name：tony，
? ? ? ? gender：male
????}
}
則可以這樣循環(huán)輸出
<p v-for="(val, key, i) in user">值：{{ val }}，鍵：{{ key }}，索引：{{ i }}</p>
注：在Vue2.20的版本后，當(dāng)在組件中使用v-for時，key屬性是必須帶上的
<p v-for="item in user" v-bind: key="item.id">{{? item }}</p>
四、數(shù)字的迭代循環(huán)
<p v-for="count in 10">{{ count }}</p>
則輸出1-10，count從1開始
v-if
在Vue中用于元素的顯示和隱藏
v-if特點：
每次都會創(chuàng)建或刪除元素
v-if有較高的切換性能消耗
如果元素涉及到頻繁的切換，最好不要用v-if
如果元素可能永遠(yuǎn)也不會被顯示出來被用戶看到，則推薦使用v-if
v-show
在Vue中也是用于元素的顯示和隱藏
v-show特點：
每次都不會創(chuàng)建或刪除元素，只是切換了元素的display：none樣式
v-show有較高的較高的初始化消耗（不管標(biāo)志位初始化為true還是false，該元素都存在，而v-if初始化為false的時候，不會創(chuàng)建元素，故v-show初始化性能消耗較高）
