Vue自定义指令详解

2023-09-27 09:59:15 57

在AngularJs中，它的指令使用directive(name,factor_function)来实现：

angular.module('myapp',[])
.directive(myDirective,function(){
return{
template:'',
restrict:'',
replace:'',
........
}
})

除了内置指令,Vue.js也允许组件自定义指令。
+自定义指令提供一种机制将数据的变化映射为DOM行为
+Vue.js用directive(id,definition)方法注册一个全局的自定义指令
+自定义的指令接受两个参数：指令ID与定义对象
+也可以用组件的directives注册一个局部自定义指令（此方法相当于AngularJsrestrict属性为A）

1.钩子函数

+钩子函数是Windows消息处理机制的一部分
+通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。
+钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。
+Windows的钩子函数可以认为是Windows的主要特性之一。利用它们，您可以捕捉您自己进程或其它进程发生的事件。
+通过“钩挂”，您可以给Windows一个处理或过滤事件的回调函数，该函数也叫做“钩子函数”，当每次发生您感兴趣的事件时，WINDOWS都将调用该函数。

angularjs提供了两个函数：compile和link,其中编译函数主要负责将作用域和DOM进行链接；链接函数用来创建可以操作DOM的指令

注意:compile和link是互斥的，入如果同时设置这两个选项，则会把compile返回函数当做link函数，而忽略link选项本身
Vue.js同样也提供了几个钩子函数都是可选的，相互之间没有制约关系

钩子函数：主要负责将作用域和DOM进行链接；链接函数用来创建可以操作DOM的指令

+bind—只调用一次，在指令第一次绑定到元素上的时候调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作

inserted—被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）

update—在bind之后立即以初始值为参数第一次调用，之后每当被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新，参数为新值与旧值。

componentUpdated—被绑定元素所在模板完成一次更新周期时调用

unbind—只调用一次，在指令从元素上解绑时调用

Vue.directive('my-directive',{
bind:function(){
//做绑定的准备工作
//比如添加事件监听器，或是其他只需要执行一次的复杂操作
},
inserted:function(){
//...
},
update:function(){
//根据获得的新值执行对应的更新
//对于初始值也会调用一次
},
componentUpdated:function(){
//...
},
unbind:function(){
//做清理操作
//比如移除bind时绑定的事件监听器
}
})

在注册之后，便可以在Vue.js模板中这样写（记得添加前缀v-）:

当只需要update函数时，可以传入函数替代定义对象：

Vue.directive('my-directive',function(value){
//这个函数作用update()
})

2.指令实例属性

所有钩子函数都将被赋值到实际的指令对象中，在钩子内this指向这个指令对象。
这个对象暴露了一些有用的属性：
钩子函数的参数：

el—指令绑定的元素，可以用来直接操作DOM。

binding—一个对象，包含以下属性：
name—指令的名字，不包含前缀
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}。
vm—拥有该指令上下文ViemModel
vnode—Vue编译生成的虚拟节点。

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

desciiptor—一个对象，包含指令的解析结果

注意：我们应当将这些属性视为只读，不要修改它们，我们也可以给指令对象添加自定义属性，但是注意不要覆盖已有的内部属性

下面将讲解一个简单的例子，当页面加载时，input输入框将自动聚焦。
代码如下：

//注册一个全局自定义指令v-focus
//当绑定元素插入到DOM中
//聚焦元素


/div>

Vue.directive('focus',{
inserted:function(el){
el.focus()}
});

varapp=newVue({
el:'#app'
});

下面将讲解一个使用钩子函数参数的例子，将元素的字体色设置为#fff，将背景色设置为传入指令的参数red，并将指令名指令绑定值，指令绑定值的表达式，传入指令的参数显示在中。

代码如下：

3.对象字面量

+如果指令需要多个值，则可以传入一个javascript对象字面量
+指令可以使用任意合法的javascript表达式

+当指令使用了字面修饰符时，它的值将按普通字符串处理并传递给update方法
+update方法将只调用一次，因为普通字符串不能影响数据变化
+若在创建自定义指令时，设置inListerral:true则特性值将被视作字符串，并将赋值给该指令的expression，字面指令不会建立数据监视。

Vue自定义指令详解

热门推荐

随机推荐