微客导航 » 文章资讯 » Vue.directive使用注意(小结)

Vue.directive使用注意(小结)

2023-09-08 12:51:06 175

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

el：指令所绑定的元素，可以用来直接操作DOM。
binding：一个对象，包含以下属性：vnode：Vue编译生成的虚拟节点。移步VNodeAPI来了解更多详情。
1. ◦name：指令名，不包括v-前缀。
2. ◦value：指令的绑定值，例如：v-my-directive="1+1"中，绑定值为2。
3. ◦oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
4. ◦expression：字符串形式的指令表达式。例如v-my-directive="1+1"中，表达式为"1+1"。
5. ◦arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"。
6. ◦modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{foo:true,bar:true}。
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。

具体事例

clickoutside.js

用途：clickoutside.js主要用于解决点解元素外的地方时执行函数主要应用的常见有弹出层点击遮罩层是隐藏窗口，或者一些弹出层点击其他地方要消失的场景

v-clickoutside具体是怎么实现的

答：主要是通过在bind中定义函数通过判断是否包含元素，执行binding.value函数

exportdefault{
/*
@paramel指令所绑定的元素
@parambinding{Object}
@paramvnodevue编译生成的虚拟节点
*/
bind(el,binding,vnode){
constdocumentHandler=function(e){
if(!vnode.context||el.contains(e.target)){
returnfalse;
}
if(binding.expression){
binding.value(e)
}
}

document.addEventListener('click',documentHandler)
},
update(el,binding){

},
unbind(el){
document.removeEventListener('click',documentHandler);
}
}

Vue.directive使用注意

首先，Vue.directive要在实例初始化之前，不然会报错，还有，定义的指令不支持驼峰式写法，也会报下面同样的错，虽然在源码中没有找到在哪里统一处理大小写，但是在有关directive的方法中捕捉到的指令命名统一变为小写,所以，还是用'-'或者'_'分割吧。

vue.js:491[Vuewarn]:Failedtoresolvedirective:xxx

然后，其定义方式有两种，一种是Vue.directive('xxx',function(el,bind,vNode){}),其中el为dom，vNode为vue的虚拟dom，bind为一较复杂对象，详情可见Vue-directive钩子函数中的参数的参数，还有一种，为

Vue.directive('my-directive',{
bind:function(){},
inserted:function(){},
update:function(){},
componentUpdated:function(){},
unbind:function(){}
})

参数代表的含义，参见钩子函数描述

最后，要使用自定义的指令，只需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式。

//Vue.directive
Vue.directive('test_directive',function(el,bind,vNode){
el.style.color=bind.value;
});
varapp=newVue({
el:'#app',
data:{
num:10,
color:'red'
},
methods:{
add:function(){
this.num++;
}
}
});

当然，也可以将method中的方法加入，bind.value即为methods中的方法。


{{num}}

增加

//Vue.directive Vue.directive('test_directive',function(el,bind,vNode){ el.style.color=bind.value(); }); varapp=newVue({ el:'#app', data:{ num:10, color:'red' }, methods:{ add:function(){ this.num++; }, changeColor:function(){ returnthis.color; } } });

这种形式，可以模仿'v-once'，并进行一定的复杂逻辑，但是想要完全达到'v-once'，可能需要考虑Vue-directive的钩子函数各个周期。下面是固定num的值，使得add的方法无效。


{{num}}

增加

因为小生刚刚接触vue，所以，希望前辈能多加指点。也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Vue.directive使用注意(小结)

热门推荐

随机推荐