除了默認(rèn)設(shè)置的核心指令( v-model 和 v-show ), Vue 也允許注冊自定義指令晶乔。
下面我們注冊一個全局指令 v-focus, 該指令的功能是在頁面加載時窍仰，元素獲得焦點：
<div id="app">
<p>頁面載入時鳖悠，input 元素自動獲取焦點：</p>
<input v-focus>
</div>

<script>
// 注冊一個全局自定義指令 v-focus
Vue.directive('focus', {
// 當(dāng)綁定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 創(chuàng)建根實例
new Vue({
el: '#app'
})
</script>
我們也可以在實例使用 directives 選項來注冊局部指令，這樣指令只能在這個實例中使用：
<div id="app">
<p>頁面載入時，input 元素自動獲取焦點：</p>
<input v-focus>
</div>

<script>
// 創(chuàng)建根實例
new Vue({
el: '#app',
directives: {
// 注冊一個局部的自定義指令 v-focus
focus: {
// 指令的定義
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
}
})
</script>

鉤子
鉤子函數(shù)
指令定義函數(shù)提供了幾個鉤子函數(shù)（可選）：
bind: 只調(diào)用一次子巾，指令第一次綁定到元素時調(diào)用，用這個鉤子函數(shù)可以定義一個在綁定時執(zhí)行一次的初始化動作驶睦。
inserted: 被綁定元素插入父節(jié)點時調(diào)用（父節(jié)點存在即可調(diào)用砰左，不必存在于 document 中）匿醒。
update: 被綁定元素所在的模板更新時調(diào)用场航，而不論綁定值是否變化。通過比較更新前后的綁定值廉羔，可以忽略不必要的模板更新（詳細(xì)的鉤子函數(shù)參數(shù)見下）溉痢。
componentUpdated: 被綁定元素所在模板完成一次更新周期時調(diào)用。
unbind: 只調(diào)用一次憋他， 指令與元素解綁時調(diào)用孩饼。

鉤子函數(shù)參數(shù)
鉤子函數(shù)的參數(shù)有：

el: 指令所綁定的元素，可以用來直接操作 DOM 竹挡。
binding: 一個對象镀娶，包含以下屬性：
name: 指令名，不包括 v- 前綴揪罕。
value: 指令的綁定值梯码， 例如： v-my-directive="1 + 1", value 的值是 2宝泵。
oldValue: 指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用轩娶。無論值是否改變都可用儿奶。
expression: 綁定值的表達(dá)式或變量名。 例如 v-my-directive="1 + 1" 鳄抒， expression 的值是 "1 + 1"闯捎。
arg: 傳給指令的參數(shù)。例如 v-my-directive:foo许溅， arg 的值是 "foo"瓤鼻。
modifiers: 一個包含修飾符的對象。 例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }贤重。
vnode: Vue 編譯生成的虛擬節(jié)點娱仔。
oldVnode: 上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用游桩。

實例
<div id="app" v-runoob:hello.a.b="message">
</div>
<script>
Vue.directive('runoob', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '
' + //name: "runoob"
'value: ' + s(binding.value) + '
' + //value: "菜鳥教程!"
'expression: ' + s(binding.expression) + '
' + //expression: "message"
'argument: ' + s(binding.arg) + '
' + //argument: "hello"
'modifiers: ' + s(binding.modifiers) + '
' + //modifiers: {"a":true,"b":true}
'vnode keys: ' + Object.keys(vnode).join(', ') //vnode keys: tag, data, children, text, elm, ns, context,
functionalContext, key, componentOptions, componentInstance,
parent, raw, isStatic, isRootInsert, isComment, isCloned,
isOnce
}
})
new Vue({
el: '#app',
data: {
message: '菜鳥教程!'
}
})
</script>

有時候我們不需要其他鉤子函數(shù)牲迫，我們可以簡寫函數(shù)，如下格式：
Vue.directive('runoob', function (el, binding) {
// 設(shè)置指令的背景顏色
el.style.backgroundColor = binding.value.color
})

指令函數(shù)可接受所有合法的 JavaScript 表達(dá)式借卧，以下實例傳入了 JavaScript 對象：
<div id="app">
<div v-runoob="{ color: 'green', text: '菜鳥教程!' }"></div>
</div>
<script>
Vue.directive('runoob', function (el, binding) {
// 簡寫方式設(shè)置文本及背景顏色
el.innerHTML = binding.value.text
el.style.backgroundColor = binding.value.color
})
new Vue({
el: '#app'
})
</script>