在学习vue.js过程中,我们一直都是使用到vue.js内置的核心指令,比如v-model,v-show,v-watch和v-html等以v-为前缀的指令,但vue.js也允许你注册自定义指令,这个宽容性实际是想让学习者和使用者更加灵活的使用vue.js,达到将数据的变化映射到 DOM 的行为的目的。基本语法是Vue.directive(id,
definition),id是指令ID,definition是自定义对象。
一、注册指令
在我的第六章教程vue.js框架快速入门简明教程(六):组件中,有探讨过组件的注册分为全部组件和局部组件,同样的,指令也分为全局指令和局部指令。如果注册的是局部指令,则只能在指定的模版中使用。
1、全局注册指令
注册全局指令,可以在整个vue.js中使用该指令;
vue.directive('focus');
如果像上面那个注册指令,值写进了一个参数指令ID,该指令没有任何功能。
根据这个指令的html模版书写是这样:
<input v-focus>
根据Vue.directive(id, definition)语法,我们可以在后面添加对象,而对象里面通常放的都是函数,成为钩子函数,这个我们会在下面结合例子详细介绍,先留个悬念。
现在我们来注册一个可用的指令:
<div id="app">
<div v-command1="70">vue.js注册指令</div>
</div>
<script>
Vue.directive('command1',{
bind(el,binding){
el.style.position ='absolute'
el.style.top=binding.value+'px';
}
});
new Vue({
el: '#app',
})
</script>
如上例子,对象中的bind为钩子函数。
el 指令所绑定的元素,可以用来直接操作 DOM 。具体用法下面再为大家一一介绍,请耐心看完哦。
2、局部注册指令
注册局部指令,则只能在指定的模版中使用。
new Vue({
el: '#app',
directives:{//注册指令v-command1
command1:{
//指令的定义
bind:function(el,binding){
//聚焦元素
el.style.position ='absolute';
el.style.top=binding.value+'px';
}
}
}
})
只有在id=app的元素中才能只用,脱离了这个区域将不能使用该指令。
二、钩子函数
经过上面指令的介绍和结合详细而又灵活的例子,应该不难发现,在使用Vue.directive(id,
definition)注册指令的时候,第二个参数中的对象包含的是一个函数,这就是上面提到的钩子函数,为什么称之为钩子函数?因为钩子和回调函数有相似之处。
现在让我们来扯远点,介绍一个回调函数。
回调函数就是在模块A有需要地调用模块B中的函数b, 但是函数b又不能满足模块A的全部要求,还得调用模块A自身的函数a()来实现需求,这个函数a()其实就是回调函数。
回到正题,钩子函数是什么呢?其实可以理解为回到函数,不同之处是钩子函数会在第一时间执行,借用上图,使用钩子函数的话,函数a()会第一时间执行,执行完之后再执行其他函数,这可能也是它的命名来有,第一时间钩出,拉出,拖出所需要的。
例如:bind是钩子函数,会在第一时间调用。
Vue.directive('command1',{
bind(el,binding){
el.style.position ='absolute'
el.style.top=binding.value+'px';
}
});
在vue.js的指令定义中,指令函数提供了几个钩子函数供我们使用。
bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次, 指令与元素解绑时调用。
例如:update钩子函数
<div id="app">
<input type="text" v-model="message">
<div v-command1="70">{{message}}</div>
</div>
<script>
Vue.directive('command1',{
update(){
alert("dsadsa")
}
});
new Vue({
el: '#app',
data:{
message:'钩子函数'
}
})
</script>
这些钩子函数至少带一个参数:
el: 指令所绑定的元素,可以用来直接操作 DOM 。
binding: 一个对象,包含以下属性:
name: 指令名,不包括 v- 前缀。
value: 指令的绑定值, 例如: v-my-directive=”1
+ 1″, value 的值是 2。
oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的表达式或变量名。 例如
v-my-directive=”1 + 1″ , expression 的值是 “1 + 1″。
arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 “foo”。
modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar,
修饰符对象 modifiers 的值是 { foo:
true, bar: true }。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
以上介绍了vue.js的自定义指令,钩子函数的使用方法和参数的使用特点。在实际开发中,可以自己定指令,使用自己定义的指令,使得我们的程序书写起来更加简单快捷。