在vue中除了一些內(nèi)置指令（v-if，v-model）外，我們還可以自定義一些指令，例如:

html結(jié)構(gòu)層

<p v-class=“ ‘red’ ”>我是全局自定義指令</p>

js行為層

<script>

// 注冊一個(gè)全局自定義指令 v-class

Vue.directive('class', {

// 當(dāng)綁定元素插入到 DOM 中。

inserted: function (el,value) {

el.style.color=value.value;

}

})

</script>

效果圖：

<div>

<input ? v-focus>

</div>

new Vue({

el:"#app",

// 注冊一個(gè)局部自定義指令 v-focus

directives:{

// 當(dāng)綁定元素插入到 DOM 中。

focus:{

inserted: function (el) {

// 聚焦元素

el.focus()

}

}

}

})

效果圖：

補(bǔ)充:鉤子函數(shù)

指令定義函數(shù)提供了幾個(gè)鉤子函數(shù)（可選）：

bind: 只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。

inserted: 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）。

update: 所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其孩子的 VNode 更新之前。指令的值可能發(fā)生了改變也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)。

componentUpdated: 所在組件的 VNode及其孩子的 VNode全部更新時(shí)調(diào)用。

unbind: 只調(diào)用一次， 指令與元素解綁時(shí)調(diào)用。

接下來我們來看一下鉤子函數(shù)的參數(shù) (包括el，binding，vnode，oldVnode) 。

在vue中除了一些內(nèi)置指令（v-if，v-model）外，我們還可以自定義一些指令，例如: