概要

如果你沒有用過 AngularJS，你可能不太清楚指令 (directive) 是什么。一個指令的本質(zhì)是模板中出現(xiàn)的特殊標(biāo)記，讓處理模板的庫知道需要對這里的 DOM 元素進(jìn)行一些對應(yīng)的處理。Vue.js 的指令概念相比 Angular 要簡單得多。Vue.js 中的指令只會以帶前綴的 HTML 特性 (attribute) 的形式出現(xiàn)：

<element
  prefix-directiveId="[argument:] expression [| filters...]">
</element>

簡單示例

<div v-text="message"></div>

這里的前綴是默認(rèn)的 v-。指令的 ID 是 text，表達(dá)式是 message。這個指令告訴 Vue.js， 當(dāng) Vue 實例的 message 屬性改變時，更新該 div 元素的 textContent。

內(nèi)聯(lián)表達(dá)式

<div v-text="'hello ' + user.firstName + ' ' + user.lastName"></div>

這里我們使用了一個計算表達(dá)式 (computed expression)，而不僅僅是簡單的屬性名。Vue.js 會自動跟蹤表達(dá)式中依賴的屬性并在這些依賴發(fā)生變化的時候觸發(fā)指令更新。同時，因為有異步批處理更新機制，哪怕多個依賴同時變化，表達(dá)式也只會觸發(fā)一次。

你應(yīng)該明智地使用表達(dá)式，并避免在你的模板里放入過多的邏輯，尤其是有副作用的語句 (事件監(jiān)聽表達(dá)式除外)。為了防止在模板內(nèi)濫用邏輯，Vue.js 把內(nèi)聯(lián)表達(dá)式限制為一條語句。如果需要綁定更復(fù)雜的操作，請使用計算屬性。

• 出于安全考慮，在內(nèi)聯(lián)表達(dá)式中你只能訪問當(dāng)前上下文中 Vue 實例的屬性和方法。

參數(shù)

<div v-on="click : clickHandler"></div>

有些指令需要在路徑或表達(dá)式前加一個參數(shù)。在這個例子中 click 參數(shù)代表了我們希望 v-on 指令監(jiān)聽到點擊事件之后調(diào)用該 ViewModel 實例的 clickHandler 方法。

過濾器

過濾器可以緊跟在指令的路徑或表達(dá)式之后，在更新 DOM 之前對值進(jìn)行進(jìn)一步處理。過濾器像 shell 腳本一樣跟在一個管道符 (|) 之后。更多內(nèi)容請移步至 深入了解過濾器。

多重指令從句

你可以在同一個特性里多次綁定同一個指令。這些綁定用逗號分隔，它們在底層被分解為多個指令實例進(jìn)行綁定。

<div v-on="
  click   : onClick,
  keyup   : onKeyup,
  keydown : onKeydown
">
</div>

字面量指令

有些指令不會創(chuàng)建數(shù)據(jù)綁定——它們的值只是一個字符串字面量。比如 v-ref 指令：

<my-component v-ref="some-string-id"></my-component>

這里的 "some-string-id" 并不是一個反應(yīng)式的表達(dá)式 — Vue.js 不會嘗試去觀測組件中的對應(yīng)數(shù)據(jù)。

在有些情況下，你也可以使用 Mustache 風(fēng)格綁定來使得字面量指令 “反應(yīng)化”：

<div v-show="showMsg" v-transition="{{dynamicTransitionId}}"></div>

但是，請注意只有 v-transition 指令具有此特性。Mustache 表達(dá)式在其他字面量指令中，例如 v-ref 和 v-el，只會被計算一次。它們在編譯完成后將不會再響應(yīng)數(shù)據(jù)的變化。

完整的字面量指令列表可以在 API 索引 中找到。

空指令

有些指令并不需要判斷特性的值 —— 這些操作對某個元素處理且僅處理一次。比如 v-pre 指令：

<div v-pre>
  <!-- 內(nèi)部模板將不會被編譯 -->
</div>

完整的空指令列表可以在 API 索引 中找到。

下一步：過濾器。