Vue.js 學習旅程Mile 5 – 模板語法之二：Directives 指令

指令 Directives

指令 (Directives) 是帶有 v- 前綴的特殊屬性 attribute。指令的值預期是單個 Javascript 表達式(Expression)。當表達式的值改變時，指令會響應式地將其產生的影響作用於 DOM 上。

常見的例如：v-text, v-if, v-on 等，後面會有篇章詳細的介紹這些常見的模板指令的用法。此篇文章主要在了解指令的配置方式。

另外，除了使用這些固定的模板語法外，我們也可以自定義指令。這個部分之後會有文章做專門的介紹。

比較

Mustache 語法：取代頁面上的某個區塊 <div></div>
Directives 指令：放在 HTML 標籤內，影響該 DOM 元素

配置方式

指令:[參數].修飾符＝"值"
Directive:[Argument].Modifier="Value"

Directive

不需要表達式。Directive 直接作用在元素上。
例如：v-once。只渲染元素和元件一次。隨後的重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。可以用於優化更新性能。

<!-- 單個元素 -->
<span v-once>This will never change: {{msg}}</span>

Directive = "Value"

Directive 依照 Value 作用在元素上。
例如：v-text="msg"。更新元素的 textContent。

<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>

Directive:Argument = "Value"

Directive 依照 Value 作用在 Argument 上。
例如：v-bind:src，動態地綁定一個或多個特性，或是 v-on:click，監聽 DOM 事件。

<!-- 綁定一個屬性 -->
<img v-bind:src="imageSrc">

<!-- 監聽 click 事件 -->
<a v-on:click="doSomething">...</a>

Directive:[Argument] = "Value"

動態參數。
從 2.6.0 開始，可以用方括號括起來的 JavaScript 表達式作為一個指令的參數。

<a v-bind:[attributeName]="url"> ... </a>

這裡的 attributeName 會被作為一個 JavaScript 表達式進行動態求值，求得的值將會作為最終的參數來使用。例如，如果你的 Vue 實例有一個 data 屬性 attributeName，其值為 "href"，那麼這個綁定將等同於 v-bind:href。

<a v-on:[eventName]="doSomething"> ... </a>

在這個範例中，當 eventName 的值為 "focus" 時，v-on:[eventName] 等同於 v-on:focus。

動態參數限制

動態參數的值預設為字串。若為 null 的話，則可以用來解除其綁定。其他非字串 或 null 型別的值就會出現錯誤警告。

Directive:Argument.Modifier="Value"

Directive 依照 Modifier 設定的特殊方式將 Value 作用在 Argument 上。
例如：v-on:click.once、v-on:submit.prevent

<!-- 點擊事件只會觸發一次 -->
<button v-on:click.once="doThis"></button>

<!-- 調用 event.preventDefault()-->
<form v-on:submit.prevent="onSubmit">...</form>

縮寫 Shorthands

對於一些頻繁用到的指令來說，使用 v- 前綴會感到繁瑣。因此，
Vue 為 v-bind 和 v-on 這兩個最常用的指令，提供了特定縮寫：

v-bind 縮寫

省略 v-bind，剩下：

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

<!-- 動態參數的縮寫 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 縮寫

v-on 縮寫為 @

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

<!-- 動態參數的縮寫 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

結語

藉由這篇文章的整理，才對 Vue 的這些指令有了全面的了解，清楚他是如何配置的。不然之前都是看到一個記一個，沒有特別清楚他的規則，常常到後來就會被搞混。現在經過整理，希望對於之後在使用這些指令時能更駕輕就熟。

參考資料

• Vue.js Guide: Template Syntax-Directives
• Vue.js Core 30天屠龍記(第6天): 模板語法 Part 2 - Directives
• Vue.js API