## [指令](https://vuejs.bootcss.com/v2/api/#%E6%8C%87%E4%BB%A4 "指令")
### [v-text](https://vuejs.bootcss.com/v2/api/#v-text "v-text")
* **預期**：`string`
* **詳細**：
更新元素的`textContent`。如果要更新部分的`textContent`，需要使用`{{ Mustache }}`插值。
* **示例**：
<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>
* **參考**：[數據綁定語法 - 插值](https://vuejs.bootcss.com/v2/guide/syntax.html#%E6%8F%92%E5%80%BC)
### [v-html](https://vuejs.bootcss.com/v2/api/#v-html "v-html")
* **預期**：`string`
* **詳細**：
更新元素的`innerHTML`。**注意：內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯**。如果試圖使用`v-html`組合模板，可以重新考慮是否通過使用組件來替代。
在網站上動態渲染任意 HTML 是非常危險的，因為容易導致[XSS 攻擊](https://en.wikipedia.org/wiki/Cross-site_scripting)。只在可信內容上使用`v-html`，**永不**用在用戶提交的內容上。
在[單文件組件](https://vuejs.bootcss.com/v2/guide/single-file-components.html)里，`scoped`的樣式不會應用在`v-html`內部，因為那部分 HTML 沒有被 Vue 的模板編譯器處理。如果你希望針對`v-html`的內容設置帶作用域的 CSS，你可以替換為[CSS Modules](https://vue-loader.vuejs.org/en/features/css-modules.html)或用一個額外的全局`<style>`元素手動設置類似 BEM 的作用域策略。
* **示例**：
<div v-html="html"></div>
* **參考**：[數據綁定語法 - 插值](https://vuejs.bootcss.com/v2/guide/syntax.html#%E7%BA%AF-HTML)
### [v-show](https://vuejs.bootcss.com/v2/api/#v-show "v-show")
* **預期**：`any`
* **用法**：
根據表達式之真假值，切換元素的`display`CSS 屬性。
當條件變化時該指令觸發過渡效果。
* **參考**：[條件渲染 - v-show](https://vuejs.bootcss.com/v2/guide/conditional.html#v-show)
### [v-if](https://vuejs.bootcss.com/v2/api/#v-if "v-if")
* **預期**：`any`
* **用法**：
根據表達式的值的真假條件渲染元素。在切換時元素及它的數據綁定 / 組件被銷毀并重建。如果元素是`<template>`，將提出它的內容作為條件塊。
當條件變化時該指令觸發過渡效果。
當和`v-if`一起使用時，`v-for`的優先級比`v-if`更高。詳見[列表渲染教程](https://vuejs.bootcss.com/v2/guide/list.html#v-for-with-v-if)
* **參考**：[條件渲染 - v-if](https://vuejs.bootcss.com/v2/guide/conditional.html)
### [v-else](https://vuejs.bootcss.com/v2/api/#v-else "v-else")
* **不需要表達式**
* **限制**：前一兄弟元素必須有`v-if`或`v-else-if`。
* **用法**：
為`v-if`或者`v-else-if`添加“else 塊”。
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
* **參考**：[條件渲染 - v-else](https://vuejs.bootcss.com/v2/guide/conditional.html#v-else)
### [v-else-if](https://vuejs.bootcss.com/v2/api/#v-else-if "v-else-if")
> 2.1.0 新增
* **類型**：`any`
* **限制**：前一兄弟元素必須有`v-if`或`v-else-if`。
* **用法**：
表示`v-if`的 “else if 塊”。可以鏈式調用。
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
* **參考**：[條件渲染 - v-else-if](https://vuejs.bootcss.com/v2/guide/conditional.html#v-else-if)
### [v-for](https://vuejs.bootcss.com/v2/api/#v-for "v-for")
* **預期**：`Array | Object | number | string`
* **用法**：
基于源數據多次渲染元素或模板塊。此指令之值，必須使用特定語法`alias in expression`，為當前遍歷的元素提供別名：
<div v-for="item in items">
{{ item.text }}
</div>
另外也可以為數組索引指定別名 (或者用于對象的鍵)：
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>
`v-for`默認行為試著不改變整體，而是替換元素。迫使其重新排序的元素，你需要提供一個`key`的特殊屬性：
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
`v-for`的詳細用法可以通過以下鏈接查看教程詳細說明。
* **參考**：
* [列表渲染](https://vuejs.bootcss.com/v2/guide/list.html)
* [key](https://vuejs.bootcss.com/v2/guide/list.html#key)
### [v-on](https://vuejs.bootcss.com/v2/api/#v-on "v-on")
* **縮寫**：`@`
* **預期**：`Function | Inline Statement | Object`
* **參數**：`event`
* **修飾符**：
* `.stop`\- 調用`event.stopPropagation()`。
* `.prevent`\- 調用`event.preventDefault()`。
* `.capture`\- 添加事件偵聽器時使用 capture 模式。
* `.self`\- 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
* `.{keyCode | keyAlias}`\- 只當事件是從特定鍵觸發時才觸發回調。
* `.native`\- 監聽組件根元素的原生事件。
* `.once`\- 只觸發一次回調。
* `.left`\- (2.2.0) 只當點擊鼠標左鍵時觸發。
* `.right`\- (2.2.0) 只當點擊鼠標右鍵時觸發。
* `.middle`\- (2.2.0) 只當點擊鼠標中鍵時觸發。
* `.passive`\- (2.3.0) 以`{ passive: true }`模式添加偵聽器
* **用法**：
綁定事件監聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。
用在普通元素上時，只能監聽[**原生 DOM 事件**](https://developer.mozilla.org/zh-CN/docs/Web/Events)。用在自定義元素組件上時，也可以監聽子組件觸發的**自定義事件**。
在監聽原生 DOM 事件時，方法以事件為唯一的參數。如果使用內聯語句，語句可以訪問一個`$event`屬性：`v-on:click="handle('ok', $event)"`。
從`2.4.0`開始，`v-on`同樣支持不帶參數綁定一個事件/監聽器鍵值對的對象。注意當使用對象語法時，是不支持任何修飾器的。
* **示例**：
<!-- 方法處理器 -->
<button v-on:click="doThis"></button>
<!-- 內聯語句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 縮寫 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默認行為 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默認行為，沒有表達式 -->
<form @submit.prevent></form>
<!-- 串聯修飾符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">
<!-- 鍵修飾符，鍵代碼 -->
<input @keyup.13="onEnter">
<!-- 點擊回調只會觸發一次 -->
<button v-on:click.once="doThis"></button>
<!-- 對象語法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
在子組件上監聽自定義事件 (當子組件觸發“my-event”時將調用事件處理器)：
<my-component @my-event="handleThis"></my-component>
<!-- 內聯語句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 組件中的原生事件 -->
<my-component @click.native="onClick"></my-component>
* **參考**：
* [事件處理器](https://vuejs.bootcss.com/v2/guide/events.html)
* [組件 - 自定義事件](https://vuejs.bootcss.com/v2/guide/components.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6)
### [v-bind](https://vuejs.bootcss.com/v2/api/#v-bind "v-bind")
* **縮寫**：`:`
* **預期**：`any (with argument) | Object (without argument)`
* **參數**：`attrOrProp (optional)`
* **修飾符**：
* `.prop`\- 被用于綁定 DOM 屬性 (property)。([差別在哪里？](https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html#answer-6004028))
* `.camel`\- (2.1.0+) 將 kebab-case 特性名轉換為 camelCase. (從 2.1.0 開始支持)
* `.sync`(2.3.0+) 語法糖，會擴展成一個更新父組件綁定值的`v-on`偵聽器。
* **用法**：
動態地綁定一個或多個特性，或一個組件 prop 到表達式。
在綁定`class`或`style`特性時，支持其它類型的值，如數組或對象。可以通過下面的教程鏈接查看詳情。
在綁定 prop 時，prop 必須在子組件中聲明。可以用修飾符指定不同的綁定類型。
沒有參數時，可以綁定到一個包含鍵值對的對象。注意此時`class`和`style`綁定不支持數組和對象。
* **示例**：
<!-- 綁定一個屬性 -->
<img v-bind:src="imageSrc">
<!-- 縮寫 -->
<img :src="imageSrc">
<!-- 內聯字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 綁定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 綁定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 綁定一個有屬性的對象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通過 prop 修飾符綁定 DOM 屬性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 綁定。“prop”必須在 my-component 中聲明。-->
<my-component :prop="someThing"></my-component>
<!-- 通過 $props 將父組件的 props 一起傳給子組件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>
`.camel`修飾符允許在使用 DOM 模板時將`v-bind`屬性名稱駝峰化，例如 SVG 的`viewBox`屬性：
<svg :view-box.camel="viewBox"></svg>
在使用字符串模板或通過`vue-loader`/`vueify`編譯時，無需使用`.camel`。
* **參考**：
* [Class 與 Style 綁定](https://vuejs.bootcss.com/v2/guide/class-and-style.html)
* [組件 - Props](https://vuejs.bootcss.com/v2/guide/components.html#Props)
* [組件 -`.sync`修飾符](https://vuejs.bootcss.com/v2/guide/components.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6)
### [v-model](https://vuejs.bootcss.com/v2/api/#v-model "v-model")
* **預期**：隨表單控件類型不同而不同。
* **限制**：
* `<input>`
* `<select>`
* `<textarea>`
* components
* **修飾符**：
* [`.lazy`](https://vuejs.bootcss.com/v2/guide/forms.html#lazy)\- 取代`input`監聽`change`事件
* [`.number`](https://vuejs.bootcss.com/v2/guide/forms.html#number)\- 輸入字符串轉為有效的數字
* [`.trim`](https://vuejs.bootcss.com/v2/guide/forms.html#trim)\- 輸入首尾空格過濾
* **用法**：
在表單控件或者組件上創建雙向綁定。細節請看下面的教程鏈接。
* **參考**：
* [表單控件綁定](https://vuejs.bootcss.com/v2/guide/forms.html)
* [組件 - 在輸入組件上使用自定義事件](https://vuejs.bootcss.com/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6%E7%9A%84%E8%A1%A8%E5%8D%95%E8%BE%93%E5%85%A5%E7%BB%84%E4%BB%B6)
### [v-pre](https://vuejs.bootcss.com/v2/api/#v-pre "v-pre")
* **不需要表達式**
* **用法**：
跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標簽。跳過大量沒有指令的節點會加快編譯。
* **示例**：
<span v-pre>{{ this will not be compiled }}</span>
### [v-cloak](https://vuejs.bootcss.com/v2/api/#v-cloak "v-cloak")
* **不需要表達式**
* **用法**：
這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如`[v-cloak] { display: none }`一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢。
* **示例**：
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
不會顯示，直到編譯結束。
### [v-once](https://vuejs.bootcss.com/v2/api/#v-once "v-once")
* **不需要表達式**
* **詳細**：
只渲染元素和組件**一次**。隨后的重新渲染，元素/組件及其所有的子節點將被視為靜態內容并跳過。這可以用于優化更新性能。
<!-- 單個元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- 組件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>
* **參考**：
* [數據綁定語法- 插值](https://vuejs.bootcss.com/v2/guide/syntax.html#%E6%8F%92%E5%80%BC)
* [組件 - 對低開銷的靜態組件使用`v-once`](https://vuejs.bootcss.com/v2/guide/components.html#%E5%AF%B9%E4%BD%8E%E5%BC%80%E9%94%80%E7%9A%84%E9%9D%99%E6%80%81%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8-v-once)
