一、內置指令
1、v-bind：響應並更新DOM特性；例如：v-bind:href v-bind:class v-bind:title v-bind:bb
2、v-on：用於監聽DOM事件； 例如：v-on:click v-on:keyup
3、v-model：數據雙向綁定；用於表單輸入等；例如：<input v-model="message">
4、v-show：條件渲染指令，為DOM設置css的style屬性
5、v-if：條件渲染指令，動態在DOM內添加或刪除DOM元素
6、v-else：條件渲染指令，必須跟v-if成對使用
7、v-for：循環指令；例如：<li v-for="(item,index) in todos"></li>
8、v-else-if：判斷多層條件，必須跟v-if成對使用；
9、v-text：更新元素的textContent；例如：<span v-text="msg"></span> 等同於 <span>{{msg}}</span>；
10、v-html：更新元素的innerHTML；
11、v-pre：不需要表達式，跳過這個元素以及子元素的編譯過程，以此來加快整個項目的編譯速度；例如：<span v-pre>{{ this will not be compiled }}</span>；
12、v-cloak：不需要表達式，這個指令保持在元素上直到關聯實例結束編譯；
13、v-once：不需要表達式，只渲染元素或組件一次，隨后的渲染，組件/元素以及下面的子元素都當成靜態頁面不在渲染。
二、自定義指令
1、自定義指令：使用Vue.directive(id,definition)注冊全局自定義指令，使用組件的directives選項注冊局部自定義指令。
2、鈎子函數：
指令定義函數提供了幾個鈎子函數（可選）：
bind：只調用一次，指令第一次綁定到元素時調用，用這個鈎子函數可以定義一個在綁定時執行一次的初始化動作。
inserted：被綁定元素插入父節點時調用（父節點存在即可調用，不必存在於 document 中）。
update：第一次是緊跟在 bind 之后調用，獲得的參數是綁定的初始值，之后被綁定元素所在的模板更新時調用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新（詳細的鈎子函數參數見下）。
componentUpdated：被綁定元素所在模板完成一次更新周期時調用。
unbind：只調用一次， 指令與元素解綁時調用。
3、鈎子函數的參數：(el, binding, vnode, oldVnode)
el：指令所綁定的元素，可以用來直接操作 DOM 。
binding：一個對象，包含以下屬性
name：指令名，不包含v-的前綴；
value：指令的綁定值；例如：v-my-directive="1+1"，value的值是2；
oldValue：指令綁定的前一個值，僅在update和componentUpdated鈎子函數中可用，無論值是否改變都可用；
expression：綁定值的字符串形式；例如：v-my-directive="1+1"，expression的值是'1+1'；
arg：傳給指令的參數；例如：v-my-directive:foo，arg的值為 'foo'；
modifiers：一個包含修飾符的對象；例如：v-my-directive.a.b，modifiers的值為{'a':true,'b':true}
vnode：Vue編譯的生成虛擬節點；
oldVnode：上一次的虛擬節點，僅在update和componentUpdated鈎子函數中可用。
<div id="app" v-demo:foo.a.b="message"></div> Vue.directive('demo', { bind: function (el, binding, vnode) { console.log('bind'); var s = JSON.stringify el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ') } }); new Vue({ el: '#app', data: { message: 'hello!' } });
// name: "demo"
// value: "hello!"
// expression: "message"
// argument: "foo"
// modifiers: {"a":true,"b":true}
// vnode keys: tag, data, children, text, elm, ns, context, functionalContext, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce
4、函數簡寫：大多數情況下，我們可能想在 bind 和 update 鈎子上做重復動作，並且不想關心其它的鈎子函數。可以這樣寫:
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
5、對象字面量：如果指令需要多個值，可以傳入一個 JavaScript 對象字面量。記住，指令函數能夠接受所有合法類型的 Javascript 表達式。
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
例子解析：
<div id="app">
<my-comp v-if="msg" :msg="msg"></my-comp>
<button @click="update">更新</button>
<button @click="uninstall">卸載</button>
<button @click="install">安裝</button>
</div>
<script type="text/javascript">
Vue.directive('hello', {
bind: function (el){
console.log('bind');
},
inserted: function (el){
console.log('inserted');
},
update: function (el){
console.log('update');
},
componentUpdated: function (el){
console.log('componentUpdated');
},
unbind: function (el){
console.log('unbind');
}
});
var myComp = {
template: '<h1 v-hello>{{msg}}</h1>',
props: {
msg: String
}
}
new Vue({
el: '#app',
data: {
msg: 'Hello'
},
components: {
myComp: myComp
},
methods: {
update: function (){
this.msg = 'Hi';
},
uninstall: function (){
this.msg = '';
},
install: function (){
this.msg = 'Hello';
}
}
})
</script>
a、頁面加載時：bind inserted
b、更新組件：update componentUpdated
c、卸載組件：unbind
d、重新安裝組件：bind inserted
注意區別：bind與inserted：bind時父節點為null，inserted時父節點存在；update與componentUpdated：update是數據更新前，componentUpdated是數據更新后。