指令 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 的這些指令有了全面的了解，清楚他是如何配置的。不然之前都是看到一個記一個，沒有特別清楚他的規則，常常到後來就會被搞混。現在經過整理，希望對於之後在使用這些指令時能更駕輕就熟。
_@nathan2009729_https://static.coderbridge.com/images/covers/default-post-cover-1.jpg)
