這次分享的是關(guān)于Vue自定義指令的使用方法，學(xué)習(xí)完基礎(chǔ)后我們?cè)賮韺?shí)戰(zhàn)完成一個(gè)下拉列表，廢話不多說，直接上干貨

基本用法

//全局注冊(cè)
Vue.directive('my-directive', {
 // 指令選項(xiàng)
})

// 局部注冊(cè)
var app = new Vue({
 el: '#app'
 directives: {
 'my-directive': {
 // 指令選項(xiàng)
 }
})

相信對(duì)Vue比較熟悉的人看完都知道，directive的寫法與組件 基本類似，只是方法名由component改為了directive。上例只是注冊(cè)了自定義指令v-my-directive，還沒實(shí)現(xiàn)具體功能，下面具體介紹 自定義指令的各個(gè)選項(xiàng)。

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

1. bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
2. inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中)。
3. update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其孩子的 VNode 更新之前。指令的值可能發(fā)生了改變也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)。
4. componentUpdated：所在組件的 VNode 及其孩子的 VNode 全部更新時(shí)調(diào)用。
5. unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

可根據(jù)需求在不同的鉤子函數(shù) 內(nèi)完成邏輯代碼，如下面v-focus,我們希望在元素插入父節(jié)點(diǎn)時(shí)就調(diào)用，那用到的最好的就是inserted了。示例代碼如下

// html部分
<div id="app" v-focus>
// js部分
Vue.directive('focus', {
 // 當(dāng)綁定元素插入到 DOM 中。
 inserted: function (el) {
 // 聚焦元素
 el.focus()
 }
})

效果如下圖所示

自定義指令 v-focus.png

可以看到，打開這個(gè)頁面，input輸入框就自動(dòng)獲取焦點(diǎn)了，成為可輸入狀態(tài)。

每個(gè)鉤子函數(shù) 都可以有幾個(gè)參數(shù)可用，比如我們上面用到了el。它們 的含義如下：

1. el：指令所綁定的元素，可以用來直接操作 DOM 。
2. binding：一個(gè)對(duì)象，包含以下屬性：
   1. name：指令名，不包括 v-前綴。
   2. value：指令的綁定值，例如：v-my-directive="1 + 1", value 的值是 2。
   3. oldValue：指令綁定的前一個(gè)值，僅在 update和 componentUpdated鉤子中可用。無論值是否改變都可用。
   4. expression：綁定值的字符串形式。例如 v-my-directive="1 + 1" ，expression 的值是 "1 + 1"。
   5. arg：傳給指令的參數(shù)。例如 v-my-directive:foo，arg 的值是 "foo"。
   6. modifiers：一個(gè)包含修飾符的對(duì)象。例如：v-my-directive.foo.bar, 修飾符對(duì)象 modifiers 的值是 { foo: true, bar: true }。
3. vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)，查閱 VNode API 了解更多詳情。
4. oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在 update和 componentUpdated鉤子中可用。

下面是結(jié)合了以上參數(shù) 的一些具體示例，代碼如下

// HTML部分
<div id="app" v-demo:msg.a.b="message">
 <div v-text:msg.a.b="message"></div>
</div>
// JS部分
Vue.directive('demo', {
 bind: function (el, binding, vnode) {
 var s = JSON.stringify
 el.innerHTML =
 'name: ' + binding.name + '<br>' +
 'value: ' + binding.value + '<br>' +
 'expression: ' + binding.expression + '<br>' +
 'argument: ' + binding.arg + '<br>' +
 'modifiers: ' + JSON.stringify(binding.modifiers).modifiers + '<br>' +
 'vnode keys: ' + Object.keys(vnode).join(',')
 }
})
new Vue({
 el: '#app',
 data: {
 message: 'some text'
 }
})

執(zhí)行后，<div>的內(nèi)容會(huì)使用innerHTML重置，結(jié)果為

name: "test"
value: "some text"
expression: "message"
argument: "msg"
modifiers: {"a":true,"b":true}
vnode keys: tag, data, children, text, elm, ns, context, functionalContext, functionalOptions, functionalScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder

在多數(shù)使用場(chǎng)景，我們會(huì)在bind鉤子里綁定一些事件，比如在document上用addEventListerer綁定，在unbind里有
removeEventListener 解綁，比較典型的示例就是讓這個(gè)元素隨著鼠標(biāo)拖拽。

如果需要更多個(gè)值，自定義指令也可以傳入一個(gè)JavaScript對(duì)象字面量， 只要是合法類型的JavaScript表達(dá)式都是可以的。示例代碼如下：

// HTML部分
<div id="app" v-demo:msg.a.b="message">
 <div v-test="{msg: 'hello', name: 'Aresn'}"></div>
</div>

//JS部分
Vue.directive('test', {
 bind: function (el, binding, vnode) {
 console.log(binding.value.msg)
 console.log(binding.value.name)
 }
})
var app = new Vue({
 el: '#app'
})

Vue 2.x很移除大量Vue 1.x自定義指令的配置。在使用自定義指令時(shí)，應(yīng)該充分解業(yè)務(wù)需求，因?yàn)楹芏鄷r(shí)候你需要的可能并不是自定義指令，而是組件。

基礎(chǔ)的東西講完了，我們來根據(jù)directive提供的API來寫一個(gè)點(diǎn)擊外部區(qū)域可以讓其下拉列表消失的菜單

// HTML部分
<div id="app" v-clock>
 <div class="main" v-clickoutside="handleClose">
 <button @click="show = !show">點(diǎn)擊顯示下拉菜單</button>
 <div class="dropdown" v-show="show">
 <p>下拉框內(nèi)容，點(diǎn)擊外面區(qū)域可以關(guān)閉</p>
 </div>
</div>

// JS部分
var app = new Vue({
 el: '#app',
 data: {
 show: false
 }，
methods: {
 handleClose() {
 this.show = false;
 }
}
})

Vue.directive('clickoutside', {
 bind: function(el, binding, vode) {
 function documentHandler (e) {
 if (el.contains(e.target)) {
 return false
 }
 if (binding.expression) {
 binding.value(e)
 }
 }
 el.__vueClickOutSide__ = documentHandler
 document.addEventListener('click', documentHandler)
 },
 unbind: function(el, binding) {
 document.removeEventListener('click', el.__vueClickOutSide__)
 delete el.__vueClickOutSide__
 }
})

要在document上綁定click事件，所以在bind鉤子內(nèi)聲明了一個(gè)函數(shù)documentHandler，并將它作為句柄定在document的click事件上。documentHandler函數(shù)做了兩個(gè)判斷，第一個(gè)是判斷點(diǎn)擊的區(qū)域是否是指令所在的元素內(nèi)部，如果是，就跑出函數(shù)，不信下繼續(xù)執(zhí)行

contains方法是用來判斷元素A是否包含了元素 B，包含返回true，不包含返回false

// HTML
<div id="parent">
 父元素
 <div id="children">子元素</div>
</div>
// JS
var a = doucment.getElemengById('parent')
var b = doucment.getElemengById('children')
console.log(A.contains(B)) // true
console.log(B.contains(A)) // false

第二個(gè)判斷是當(dāng)前 的指令v-clickoutside有沒有寫表達(dá)式，在該自定義指令中，表達(dá) 式應(yīng)該是第一個(gè)函數(shù) ，在過濾了內(nèi)部元素后，點(diǎn)擊外面任何區(qū)域應(yīng)該招待用戶表達(dá) 式中的函數(shù) ，所以binding.value就用來執(zhí)行上下文methods中指定的函數(shù)的