指令是特殊的帶有字首v-的特性。指令的值限定為繫結表示式，指令的職責就是當其表示式的值改變時把某些特殊的行為應用到DOM上。

1. v-if

v-if指令可以完全根據表示式的值在DOM中生成或移除一個元素。

false——移除；true——生成一個元素

如果想切換多個元素，可以把<template>元素當作包裝元素

切換v-if模組時，有區域性編譯/解除安裝過程。

v-if是惰性的——如果初始渲染時條件為假，則什麼也不做，在條件第一次變為真時才開始區域性編譯（編譯會被快取起來）。

2.v-show

v-show指令是根據表示式的值來顯示或隱藏HTML元素。

false—隱藏，元素上多了一個內聯樣式styLe=”display:none”

注：v-show不支援 <template>語法

v-show——元素始終被編譯保留，只是簡單的基於CSS切換。

注：一般來說，v-if有更高的切換消耗，而v-show有更高的初始渲染消耗。因此，如果需要頻繁的切換，則使用v-show較好；如果在執行時條件不大可能改變，則使用v-if較好。

3.v-else

v-else必須著在v-if或v-show，充當else的功能。

將v-show用在元件上時，因為指令的優先順序v-else會出現問題，所以要用另一個v-show替換v-else。

4.v-model

v-model指令用來在input、select、text、checkbox、radio等表單控制元件元素上建立雙向資料繫結。

v-model指令後面還可新增多個引數（number、lazy、debounce）。

number——輸入轉換為number型別

lazy——將資料改到change事件中發生

debounde——設定一個最小的延時，在每次敲擊之後延時同步輸入框的值與資料。

5.v-for

v-for指令基於源資料重複渲染元素。使用$index呈現相對應的陣列索引。

傳入的表示式形式，如：item in/of items

6.v-text

v-text指令可以更新元素的textContent.

7、v-html指令可以更新元素的innerHTML.

注：不建議在網站上直接動態渲染任意HTML片段，很容易導致XSS攻擊。

8、v-bind指令用於響應更新HTML特性，將一個或多個attribute，或者一個元件prop動態繫結到表示式。

9、v-on指令用於繫結事件監聽器。事件型別由引數指定；表示式可以是方法的名字或一個內聯語句；如果沒有修飾符也可以省略。

如：方法處理器：<button v-on=”doThis”></button>

內聯語句：<button v-on:click=”doThat(‘hello’,$event)”></button>

縮寫：<button @click=”doThis”></button>

v-on後面可以增加修飾符：

·.stop——呼叫event.stopPropagation()

·.prevent——呼叫event.preventDefault()

·.capture——新增事件偵聽器時使用capture

·.self——只當事件是從偵聽器繫結的元素本身觸發時才觸發回撥。

·.{keyCode | keyAlias}——只在指定按鍵上觸發回撥。

如：停止冒泡： @click.stop=”事件名”

阻止預設行為： @click.prevent=”事件名”

阻止預設行為（無表示式）：@submit.prevent

串聯修飾符：@click.stop.prevent=”事件名”

鍵修飾符，鍵別名：@keyup.enter=”onEnter”

鍵修飾符，鍵程式碼：@keyup.13=”onEnter”

10.v-ref在父元件上註冊一個子元件的索引，便於直接訪問。