3.1.1　指令

指令（directives）是Vue中最常用的功能，以帶有v-前綴的特殊屬性形式呈現(xiàn)，主要負(fù)責(zé)當(dāng)表達(dá)式的值改變時，將其產(chǎn)生的連帶影響響應(yīng)式地作用于DOM。

1．v-bind

v-bind：響應(yīng)并更新DOM特性，例如v-bind:href、v-bind:class、v-bind:title等。

主要用法：綁定屬性、動態(tài)更新HTML元素上的屬性。

代碼如下：

運(yùn)行效果如圖3-1所示。

圖3-1　v-bind運(yùn)行效果

2．v-model

v-model：數(shù)據(jù)雙向綁定，用于表單輸入，例如<input v-model="message">。

主要用法：用在input、select、text、checkbox、radio等表單控件或者組件上創(chuàng)建雙向綁定。它會根據(jù)控件類型自動選取正確的方法來更新元素，主要負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并處理一些極端的例子。

代碼如下：

運(yùn)行效果如圖3-2所示。

圖3-2　v-model運(yùn)行效果圖

3．v-for

v-for：循環(huán)指令。例如：

    <li v-for="(item,index) in todos"></li>

主要用法：基于源數(shù)據(jù)多次渲染元素或模塊。此指令的值必須使用特定語法，為當(dāng)前遍歷的元素提供別名。

代碼如下：

運(yùn)行效果如圖3-3所示。

圖3-3　v-for運(yùn)行效果圖

提示：上述代碼中的<li v-for='value in arr'>，如果其值為'value in arr'，則在控制臺顯示data中arr的內(nèi)容；如果其值為'value in json'，則顯示data中json的內(nèi)容。

4．v-on

v-on：用于監(jiān)聽DOM事件，例如v-on:click、v-on:keyup等。

主要用法：綁定事件監(jiān)聽器。事件類型由參數(shù)指定，表達(dá)式可以是一個方法的名稱或一個內(nèi)聯(lián)語句，如果沒有修飾符也可以省略。V-on用在普通元素上時，只能監(jiān)聽原生DOM事件；用在自定義元素組件上時，能監(jiān)聽子組件觸發(fā)的自定義事件。在監(jiān)聽原生DOM事件時，方法以事件為唯一的參數(shù)。如果使用內(nèi)聯(lián)語句，語句可以訪問一個$event**屬性：**v-on:click="handle('ok', $event)"。

代碼如下：

運(yùn)行效果如圖3-4所示。

圖3-4　v-on運(yùn)行效果圖

5．v-html

v-html：更新元素的innerHTML。

提示：按普通HTML插入“-”，不會作為Vue模板進(jìn)行編譯。如果試圖使用v-html組合模板，可以重新考慮是否通過使用組件來替代。在網(wǎng)站上動態(tài)渲染任意HTML是非常危險的，容易導(dǎo)致XSS攻擊。建議只在可信內(nèi)容上使用v-html，不在用戶提交的內(nèi)容上使用。

代碼如下：

運(yùn)行效果如圖3-5所示。

圖3-5　v-html運(yùn)行效果圖

6．v-text

v-text：更新元素的textContent，例如<span v-text="msg"></span>等同于<span>{{msg}}</span>。

主要用法：更新元素的textContent。如果要更新部分的textContent，需要使用{{mustache}}插值。

提示：使用<span v-text="msg"></span>和<span>{{msg}}</span>兩種寫法都可以。

代碼如下：

運(yùn)行效果如圖3-6所示。

圖3-6　v-text運(yùn)行效果圖

7．v-cloak

v-cloak：不需要表達(dá)式，這個指令保持在元素上，直到關(guān)聯(lián)實(shí)例結(jié)束編譯。

主要用法：當(dāng)Cloak和CSS規(guī)則（如[v-cloak] {display: none}）一起用時，這個指令可以隱藏未編譯的<mustache>標(biāo)簽直到實(shí)例準(zhǔn)備完畢，否則在渲染頁面時，有可能用戶會先看到<mustache>標(biāo)簽，然后看到編譯后的數(shù)據(jù)。

代碼如下：

運(yùn)行效果如圖3-7所示。

圖3-7　v-cloak運(yùn)行效果圖

8．v-pre

v-pre：不需要表達(dá)式，用于跳過元素及子元素的編譯過程，以此來加快整個項(xiàng)目的編譯速度。例如：

    <span v-pre>{{ this will not be compiled }}</span>

主要用法：跳過元素和它的子元素的編譯過程。此外，它可以用來顯示原始<mustache>標(biāo)簽。

代碼如下：

運(yùn)行效果如圖3-8所示。

圖3-8　v-pre運(yùn)行效果圖

9．v-once

v-once：不需要表達(dá)式，只渲染元素或組件一次。以后渲染時，組件/元素及下面的子元素都當(dāng)成靜態(tài)頁面不再被渲染，這可以用于優(yōu)化更新性能。

代碼如下：

運(yùn)行效果如圖3-9所示。

圖3-9　v-once運(yùn)行效果圖