vue自定義指令的基礎使用這裡就不闡述，看官網文件：
本文用乙個例項描述自定義指令的要點，自定義乙個資料上報的指令。
你可能會這樣寫demo:
// 自定義v-datacenter命令埋點,點選節點傳送埋點資料//demo : 進入學習中心
const datacenter = function
(data)
vue.directive('datacenter',
el.addeventlistener('click', el._datacenter)
},unbind(el)
})
這個demo對節點的點選做了響應，處理了資料埋點。有什麼問題呢？只處理了初次繫結的資料，如果你的資料是通過ajax非同步獲取的，就可能出現問題，比如
<div
v-datacenter
="">進入學習中心
div>
其中info.dataevent最開始是空字元，從後台拉取資料以後info.dataevent才有值。那麼上面的自定義指令中bind中的binding.value的值應當是為空字元。點選上報資料時「ei」的值一直為空字元
改進：
// 自定義v-datacenter命令埋點,點選節點傳送埋點資料//demo : 進入學習中心
vue.directive('datacenter',
el.addeventlistener('click', el._datacenter)
},update(el, binding)
el.addeventlistener('click', el._datacenter)
}},
unbind(el)
})
新增了update（當所在元件的 vnode 更新時呼叫），由於update時指令的value可能完全沒有改動，所以要判斷當值有更改且有效時重新繫結click監聽。這樣和bind配合就滿足了同步/非同步的所有場景。
真的就ok了麼？顯然不是，還有一種異常情況：在特殊情況下(如路由切換)，節點既要響應click監聽,也要移除節點。unbind就會在響應click監聽之前呼叫。監聽在響應之前就被移除，導致失敗。
二次改進：
//自定義v-datacenter命令埋點,點選節點傳送埋點資料
//demo : 進入學習中心
vue.directive('datacenter',
el.addeventlistener('click', el._datacenter)
},update(el, binding)
el.addeventlistener('click', el._datacenter)}},
unbind(el) )}
})
要避免在響應監聽前監聽被移除，所以將移除監聽放到下乙個巨集任務。ok，收工！
Vue自定義指令
vue有很多內建的指令，比如說v on，v model，v clock等等，每乙個指令會完成一定的功能，但是這些內建的指令總會有些侷限性，要是能夠自定義指令就好了 vue的自定義指令分類 全域性指令和區域性指令 vue指令的定義和用法 以全域性指令為例 1.語法 vue.directive 指令id...
vue自定義指令
自定義指令主要有兩種方式。一是在元件裡以directives的選項來自定義指令的內容。這樣的自定義指令是區域性的自定義指令，只在當前的元件裡面才能使用。script export default directives arr arr.join el.style.csstext arr script ...
VUE 自定義指令
dom插入便獲取焦點 vue.directive focus 根據指令的值決定自否獲取焦點 vue.directive focus 注 被拖拽的元素必須有定位樣式 vue.directive drag function el,binding document.nm useup function 拓展...