# Vue.js 學習旅程Mile 5 – 模板語法之二：Directives 指令
###### tags: `w3HexSchool` `Vue` `Javascript`

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

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

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

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

### 配置方式
:::info
**指令:[參數].修飾符＝"值"**
**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](https://vuejs.org/v2/guide/syntax.html#Directives)
* [Vue.js Core 30天屠龍記(第6天): 模板語法 Part 2 - Directives](https://ithelp.ithome.com.tw/articles/10203752)
* [Vue.js API](https://cn.vuejs.org/v2/api/)