vue官方文檔中介紹了兩種自定義指令的方法：全局自定義和局部自定義。
全局自定義組件可以在main.js中直接注冊(cè)。領(lǐng)用directive方法：
// 自定義一個(gè)全局自定義指令 v-addOne
Vue.directive("addOne",{
? ? ? ? bind: function(){
? ? ? ? ? ? ? ? //只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
? ? ? ? },
? ? ? ? inserted: function(){
? ? ? ? ? ? ? ? //被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）
? ? ? ?},
? ? ? ? update: function(){
? ? ? ? ? ? ? ? ? ? ? // 被綁定元素所在的模板更新時(shí)調(diào)用，而不論綁定值是否變化。通過(guò)比較更新前后的綁定值，可以忽略不必要的模板更新
? ? ? ? },
? ? ? ? componentUpdated: function(){
? ? ? ? ? ? ? ? ? ? //被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。
? ? ? ? },
? ? ? ?unbind: function(){
? ? ? ? ? ? ? ? ? ? // 只調(diào)用一次， 指令與元素解綁時(shí)調(diào)用。
? ? ? ? }
})
結(jié)構(gòu)模板中使用： <div v-addOne></div>
局部自定義組件：在組件中添加一個(gè)directives選項(xiàng)：
directives: {
? ? ? ? ?addOne:{
? ? ? ? ? ? ? ?// 里面和全局注冊(cè)的鉤子函數(shù)一樣
? ? ? ? ? ?}
}
若是自定義的指令只使用update時(shí)，直接傳入函數(shù)即可，如下：
Vue.directive('my-directive',function(){
? ? ? ? ? // ............
})
自動(dòng)獲取input焦點(diǎn)的示例
//注冊(cè)一個(gè)全局自定義指令v-focus
html部分：<input v-focus>
Vue.directive('focus', {
? ? ? ? ?// 當(dāng)綁定元素插入到DOM中
? ? ? ? ?inserted: function (el) {
? ? ? ? ? ? ? ? ? // 聚焦元素
? ? ? ? ? ? ? ? ? el.focus()
? ? ? ? ? }
});
var app = new Vue({
? ? ? ? el: '#app'
});
當(dāng)指令需要多個(gè)值時(shí)也可以傳入一個(gè)字面量對(duì)象
<div id="hook-arguments-example" ?v-demo-directive="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demoDirective', function(el, binding, vnode){
? ? ? ? ? ?console.log(binding.value.color);
? ? ? ? ? ?console.log(binding.value.text);
});
var demo = new Vue({
? ? ? ? ? ?el: '#hook-arguments-example'
})
