3.1.1　指令

指令（directives）是Vue中最常用的功能，以帶有v-前綴的特殊屬性形式呈現，主要負責當表達式的值改變時，將其產生的連帶影響響應式地作用于DOM。

1．v-bind

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

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

代碼如下：

運行效果如圖3-1所示。

圖3-1　v-bind運行效果

2．v-model

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

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

代碼如下：

運行效果如圖3-2所示。

圖3-2　v-model運行效果圖

3．v-for

v-for：循環指令。例如：

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

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

代碼如下：

運行效果如圖3-3所示。

圖3-3　v-for運行效果圖

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

4．v-on

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

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

代碼如下：

運行效果如圖3-4所示。

圖3-4　v-on運行效果圖

5．v-html

v-html：更新元素的innerHTML。

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

代碼如下：

運行效果如圖3-5所示。

圖3-5　v-html運行效果圖

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>兩種寫法都可以。

代碼如下：

運行效果如圖3-6所示。

圖3-6　v-text運行效果圖

7．v-cloak

v-cloak：不需要表達式，這個指令保持在元素上，直到關聯實例結束編譯。

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

代碼如下：

運行效果如圖3-7所示。

圖3-7　v-cloak運行效果圖

8．v-pre

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

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

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

代碼如下：

運行效果如圖3-8所示。

圖3-8　v-pre運行效果圖

9．v-once

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

代碼如下：

運行效果如圖3-9所示。

圖3-9　v-once運行效果圖