這次分享的是關于Vue自定義指令的使用方法，學習完基礎后我們再來實戰完成一個下拉列表，廢話不多說，直接上干貨
基本用法
//全局注冊Vue.directive('my-directive', { // 指令選項})// 局部注冊var app = new Vue({ el: '#app' directives: { 'my-directive': { // 指令選項 }})相信對Vue比較熟悉的人看完都知道，directive的寫法與組件 基本類似，只是方法名由component改為了directive。上例只是注冊了自定義指令v-my-directive，還沒實現具體功能，下面具體介紹 自定義指令的各個選項。
指令定義函數提供了幾個鉤子函數 (可選)：
可根據需求在不同的鉤子函數 內完成邏輯代碼，如下面v-focus,我們希望在元素插入父節點時就調用，那用到的最好的就是inserted了。示例代碼如下
// html部分<div id="app" v-focus>// js部分Vue.directive('focus', { // 當綁定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() }})效果如下圖所示
自定義指令 v-focus.png
可以看到，打開這個頁面，input輸入框就自動獲取焦點了，成為可輸入狀態。
每個鉤子函數 都可以有幾個參數可用，比如我們上面用到了el。它們 的含義如下：
下面是結合了以上參數 的一些具體示例，代碼如下
// 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' }})執行后，<div>的內容會使用innerHTML重置，結果為
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在多數使用場景，我們會在bind鉤子里綁定一些事件，比如在document上用addEventListerer綁定，在unbind里有
removeEventListener 解綁，比較典型的示例就是讓這個元素隨著鼠標拖拽。
如果需要更多個值，自定義指令也可以傳入一個JavaScript對象字面量， 只要是合法類型的JavaScript表達式都是可以的。示例代碼如下：
// 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自定義指令的配置。在使用自定義指令時，應該充分解業務需求，因為很多時候你需要的可能并不是自定義指令，而是組件。
基礎的東西講完了，我們來根據directive提供的API來寫一個點擊外部區域可以讓其下拉列表消失的菜單
// HTML部分<div id="app" v-clock> <div class="main" v-clickoutside="handleClose"> <button @click="show = !show">點擊顯示下拉菜單</button> <div class="dropdown" v-show="show"> <p>下拉框內容，點擊外面區域可以關閉</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鉤子內聲明了一個函數documentHandler，并將它作為句柄定在document的click事件上。documentHandler函數做了兩個判斷，第一個是判斷點擊的區域是否是指令所在的元素內部，如果是，就跑出函數，不信下繼續執行
contains方法是用來判斷元素A是否包含了元素 B，包含返回true，不包含返回false
// HTML<div id="parent"> 父元素 <div id="children">子元素</div></div>// JSvar a = doucment.getElemengById('parent')var b = doucment.getElemengById('children')console.log(A.contains(B)) // trueconsole.log(B.contains(A)) // false第二個判斷是當前 的指令v-clickoutside有沒有寫表達式，在該自定義指令中，表達 式應該是第一個函數 ，在過濾了內部元素后，點擊外面任何區域應該招待用戶表達 式中的函數 ，所以binding.value就用來執行上下文methods中指定的函數的
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
