自定义指令
平时我们和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 钩子中可用。