[toc] ## 概要 如果你沒有用過 AngularJS，你可能不太清楚指令 (directive) 是什么。一個指令的本質是模板中出現的特殊標記，讓處理模板的庫知道需要對這里的 DOM 元素進行一些對應的處理。Vue.js 的指令概念相比 Angular 要簡單得多。Vue.js 中的指令只會以帶前綴的 HTML 特性 (attribute) 的形式出現： ~~~ <element prefix-directiveId="[argument:] expression [| filters...]"> </element> ~~~ ## 簡單示例 ~~~ <div v-text="message"></div> ~~~ 這里的前綴是默認的 v-。指令的 ID 是 text，表達式是 message。這個指令告訴 Vue.js， 當 Vue 實例的 message 屬性改變時，更新該 div 元素的 textContent。 ## 內聯表達式 ~~~ <div v-text="'hello ' + user.firstName + ' ' + user.lastName"></div> ~~~ 這里我們使用了一個計算表達式 (computed expression)，而不僅僅是簡單的屬性名。Vue.js 會自動跟蹤表達式中依賴的屬性并在這些依賴發生變化的時候觸發指令更新。同時，因為有異步批處理更新機制，哪怕多個依賴同時變化，表達式也只會觸發一次。 你應該明智地使用表達式，并避免在你的模板里放入過多的邏輯，尤其是有副作用的語句 (事件監聽表達式除外)。為了防止在模板內濫用邏輯，Vue.js 把內聯表達式限制為一條語句。如果需要綁定更復雜的操作，請使用計算屬性。 出于安全考慮，在內聯表達式中你只能訪問當前上下文中 Vue 實例的屬性和方法。 ## 參數 ~~~ <div v-on="click : clickHandler"></div> ~~~ 有些指令需要在路徑或表達式前加一個參數。在這個例子中 click 參數代表了我們希望 v-on 指令監聽到點擊事件之后調用該 ViewModel 實例的 clickHandler 方法。 ## 過濾器 過濾器可以緊跟在指令的路徑或表達式之后，在更新 DOM 之前對值進行進一步處理。過濾器像 shell 腳本一樣跟在一個管道符 (|) 之后。更多內容請移步至 深入了解過濾器。 ## 多重指令從句 你可以在同一個特性里多次綁定同一個指令。這些綁定用逗號分隔，它們在底層被分解為多個指令實例進行綁定。 ~~~ <div v-on=" click : onClick, keyup : onKeyup, keydown : onKeydown "> </div> ~~~ ## 字面量指令 有些指令不會創建數據綁定——它們的值只是一個字符串字面量。比如 v-ref 指令： ~~~ <my-component v-ref="some-string-id"></my-component> ~~~ 這里的 "some-string-id" 并不是一個反應式的表達式 — Vue.js不會嘗試去觀測組件中的對應數據。 在有些情況下，你也可以使用 Mustache 風格綁定來使得字面量指令 “反應化”： ~~~ <div v-show="showMsg" v-transition="{{dynamicTransitionId}}"></div> ~~~ 但是，請注意只有 v-transition 指令具有此特性。Mustache 表達式在其他字面量指令中，例如 v-ref 和 v-el，只會被計算一次。它們在編譯完成后將不會再響應數據的變化。 完整的字面量指令列表可以在 API 索引 中找到。 ## 空指令 有些指令并不需要判斷特性的值 —— 這些操作對某個元素處理且僅處理一次。比如 v-pre 指令： ~~~ <div v-pre> <!-- 內部模板將不會被編譯 --> </div> ~~~