vue如何编写自定义指令directive

vue已经给我们内置了很多很好用的指令了（v-mode 、v-show）等等，但是有时候当这些指令不能满足我们需求的时候，我们还可以使用vue的自定义指令功能编写我们的指令，这是一个很强大的功能。

需要说明的是：尽管自定义指令这个功能很强大，但是其是对普通的DOM底层进行了直接的操作，会消耗一定的性能，所以我们在使用的时候一定要权衡利弊。

全局定义

我们可以使用vue的接口Vue.directive()去定义一个自定义的指令。

// 第一个参数为指令的名称，第二参数则是一个对象，包含了指令的钩子函数

Vue.directiive("directivename",{
	// 这个钩子只调用一次，在指令绑定到元素的时候被调用。通常可以在这里进行初始化
	bind(el,binding,vnode,oldVnode){
		consolo.log(el,binding,vnode)
	}
	// 在绑定指令后，绑定的元素插入父元素时触发，在bind钩子后
	inserted(el,binding,vnode,oldVnode){

	}
	// 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
	update(el,binding,vnode,oldVnode){

	}
	// 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
	componentUpdate(el,binding,vnode,oldVnode){

	}
	// 指令与元素解绑后调用
	unbind(el,binding,vnode,oldVnode){}
})

指令的使用

和使用其他内置指令一样在元素上绑定

<div v-directive:参数.修饰符.修饰符="数据"></div>

binding参数

bindinf.name:指令的名字
binding.arg:指令的参数
binding.modifiers:指令的修饰符
binding.value:数据的数值（数值）
binding.expression:数据的字符串

局部指令

如果你愿意的话，你可以只定义一个组件或者部分组件的自定义指令
定义的的方法也很简单：只需要在组件选项里定义directives即可

directives:{
	directivename:{
		// 这个钩子只调用一次，在指令绑定到元素的时候被调用。通常可以在这里进行初始化
		bind(el,binding,vnode,oldVnode){}
		// 在绑定指令后，绑定的元素插入父元素时触发，在bind钩子后
		inserted(el,binding,vnode,oldVnode){}
		// 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
		update(el,binding,vnode,oldVnode){}
		// 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
		componentUpdate(el,binding,vnode,oldVnode){}
		// 指令与元素解绑后调用
		unbind(el,binding,vnode,oldVnode){}
	}
}

动态参数

除此之外，我们还可以定义具有动态参数的指令

v-directivename:[动态参数].修饰符.修饰符="数据"