Vue教程11-自定义指令

自定义指令

平时我们和Vue搭配使用的UI组件都是element-ui，每个调用的指令都有已经封装完毕的绑定数据和事件，但是有时候我们希望能够在绑定指令上再复杂化，这个情况下就需要我们自己去定义一个绑定指令了。

可以这样理解，一个element-UI里面的组件，它写好了一个点击指令，只要绑定好对应的函数便可以直接使用，但是此时，我们希望使用鼠标移入/移出指令，但是element-UI没有写。那我们就可以自己来写了。

因为我平时都喜欢以组件为单位，所以在组件里面局部定义指令更方便。

在script里面，directives对象便是用于设置自定义指令的地方，之后在里面设置指令的名称：

directives: {
	focus:{
	 	// 指令的定义
	 	inserted (el) {
  			el.focus()
  		}
  	}
}

之后便可以在组件上使用 v-focus指令了。

上面是定义一个指令，我们知道focus是定义的指令名字，那么现在需要了解inserted的含义。

钩子函数

一个指令对象，可以选择性的绑定一下几种钩子函数：

bind：只调用一次，指令第一次绑定到元素时调用。
inserted：被绑定元素插入父节点时调用 。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

上面几个是钩子函数，下面便是钩子函数所要用到的参数了。

钩子函数参数

指令钩子函数会被传入以下参数：

el: 指令绑定的元素，可以直接操纵DOM。所以平时最多使用的便是el参数了。

除此之外，还有很多参数，但是其他参数都只可读，不能修改。

binding: 一个对象，包含以下属性：

name：指令的名字，注意 不包括v-前缀。
value：指令绑定的值
oldValue：指令绑定的前一个值
expression：字符串形式的指令表达式
arg：指令传递过来的参数

来个例子：

<div v-focus:demo='message'/>

data(){
	return: {
		message: 'hello'
	}
}
directive：{
	focus:{
		bind(el, binding,vnode){
			console.log(binding.name); // focus
			console.log(binding.value); // hello
			console.log(binding.expression); // message
			console.log(binding.arg); // demo 
		}
	}
}

vnode：Vue 编译生成的虚拟节点。

oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。