常用內(nèi)置指令
v-bind：
? ? 主要用于動(dòng)態(tài)的綁定DOM元素屬性，即屬性值來自 Vue 中的 data 屬性提供的相應(yīng)的值。
例如：
<a v-bind:href="linkUrl">我是超鏈接</a>
new Vue({
data: {
linkUrl : "http://www.xxxx.com"
}
})
v-bind也可以簡寫為 : ，即上訴例子可以簡寫為
<a :href="linkUrl">我是超鏈接</a>
v-model：
? ? 我們可以使用 v-model 指令在<input>(<input> 標(biāo)簽有多種類型，如 button、select 等等)及 <textarea> 元素上進(jìn)行雙向數(shù)據(jù)綁定。但 v-model 本質(zhì)上不過是語法糖。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對一些極端場景進(jìn)行一些特殊處理。
? ? 使用v-model可以實(shí)現(xiàn)數(shù)據(jù)的綁定，也就是說我們在輸入框中輸入什么數(shù)據(jù)，對應(yīng)的<span>標(biāo)簽中就會(huì)顯示什么數(shù)據(jù)。
? ? 具有 lazy、number、debounce（2.0 廢除）。trim（2.0 新增）這些修飾符。
下面這個(gè)例子可以將你輸入的內(nèi)容實(shí)時(shí)的顯示在頁面上：
<!DOCTYPE html>
<html>
<head>
<title>v-model</title>
<meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
<!-- 未使用 v-model 進(jìn)行數(shù)據(jù)雙向綁定 -->
<h1>未使用 v-model 進(jìn)行數(shù)據(jù)雙向綁定</h1>
<input type="text" name="">
<h2>{{ input1 }}</h2>
<hr>
<!-- 使用了 v-model 進(jìn)行數(shù)據(jù)雙向綁定 -->
<h1>使用了 v-model 進(jìn)行數(shù)據(jù)雙向綁定</h1>
<input type="text" name="" v-model="input2">
<h2>{{ input2 }}</h2>
</div>
<script type="text/javascript">
//定義數(shù)據(jù)
var data = {
input2 : ""
}
var vm = new Vue({
el: "#app",
data: data
});
</script>
</body>
</html>
運(yùn)行效果如下：
v-if/v-else/v-show：
? ? v-if/v-else/v-show 這三個(gè)指令主要用于根據(jù)條件展示對應(yīng)的模板內(nèi)容。
? ? v-if 和 v-show 的主要區(qū)別就在于，v-if 在條件為 false 的情況下并不進(jìn)行模板的編譯，而 v-show 則會(huì)在模板編譯好之后將元素隱藏掉。v-if 的切換消耗要比 v-show 高，但初始條件為 false 的情況下，v-if 的初始渲染要稍快。
v-for：
1．參數(shù)順序變化
當(dāng)包含參數(shù) index 或 key 時(shí)，對象參數(shù)修改為（item, index）或（value, key），這樣
與 JS Array 對象的新方法 forEach 和 map，以及一些對象迭代器（例如 lodash）的參數(shù)能保
持一致。
2．v-bind:key屬性 track-by 被 v-bind ：key 代替，<div v-for="item in items" tranck-by="id"> 需要改寫成 <div v-for="item in items" v-bind:key="item.id">。
３．n in 10v-for="n in 10" 中的 n 由原來的 0 ～ 9 迭代變成 1 ～ 10 迭代。
v-on：
主要用于事件的綁定。
<button v-on:click="func">提交<button>
或
<button @click="func">提交<button>
v-text：
v-text，參數(shù)類型為 String，作用是更新元素的 textContent。{{}} 文本插值本身也會(huì)
被編譯成 textNode 的一個(gè) v-text 指令。而與直接使用 {{}} 不同的是，v-text 需要綁定在某
個(gè)元素上，能避免未編譯前的閃現(xiàn)問題。例如：
<span>{{msg}}</span> //可能出現(xiàn)編譯閃現(xiàn)問題
<span v-text="msg"></span> //不會(huì)出現(xiàn)閃現(xiàn)問題
v-HTML：
v-HTML, 參數(shù)類型為 String，作用為更新元素的 innerHTML，接受的字符串不會(huì)進(jìn)行
編譯等操作，按普通 HTML 處理。同 v-text 類似，{{{}}} 插值也會(huì)編譯為節(jié)點(diǎn)的 v-HTML
指令，v-HTML 也需要綁定在某個(gè)元素上且能避免編譯前閃現(xiàn)問題。例如：
<span>{{HTML}}</span> //可能出現(xiàn)編譯閃現(xiàn)問題
<div v-HTML="HTML"></div> //不會(huì)出現(xiàn)閃現(xiàn)問題
v-el/v-ref：
已棄用，統(tǒng)一使用 ref 屬性標(biāo)記元素或組件添加標(biāo)記，然后通過this.$refs獲取,示例如下：
<!DOCTYPE html>
<html>
<head>
<title>v-model</title>
<meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
<div ref="test">hello vue !!!!!!!!</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
mounted:function (){
alert(this.$refs.test.innerText)
}
});
console.log(vm.$refs.test.innerText)
</script>
</body>
</html>
v-pre：
用來跳過編譯這個(gè)元素和子元素，顯示原始的{{}}Mustache標(biāo)簽，用來減少編譯時(shí)間，例如：
<div>{{msg}}</div>
new Vue({
el: "#app",
data:{
msg: "test v-pre"
}
})
v-cloak：
v-cloak 指令相當(dāng)于在元素上添加了一個(gè) [v-cloak] 的屬性，直到關(guān)聯(lián)的實(shí)例結(jié)束編譯。
官方推薦可以和 css 規(guī)則 [v-cloak]{ display :none } 一起使用，可以隱藏未編譯的 Mustache
標(biāo)簽直到實(shí)例準(zhǔn)備完畢。例如：
<div v-cloak>{{ msg }}</div>
v-once：
v-once 指令是 Vue.js 2.0 中新增的內(nèi)置指令，用于標(biāo)明元素或組件只渲染一次，即使隨
后發(fā)生綁定數(shù)據(jù)的變化或更新，該元素或組件及包含的子元素都不會(huì)再次被編譯和渲染。這樣
就相當(dāng)于我們明確標(biāo)注了這些元素不需要被更新，所以 v-once 的作用是最大程度地提升了更
新行為中頁面的性能，可以略過一些明確不需要變化的步驟。
示例：
<!DOCTYPE html>
<html>
<head>
<title>v-model</title>
<meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
<div v-once>v-once：{{oncemsg}}</div>
<div>no v-once：{{msg}}</div>
</div>
<script type="text/javascript">
data = {
oncemsg: "test v-once",
msg: "hello vue!!!!"
}
var vm = new Vue({
el: "#app",
data: data,
mounted:function (){
this.oncemsg = "changed msg",
this.msg = "changed msg"
}
});
</script>
</body>
</html>
運(yùn)行之后可以發(fā)現(xiàn)，加了v-once的msg并沒有被改變值。
