vue之自定义指令
全局自定义指令
局部自定义指令
自定义指令钩子函数 :
-
bind(第一次绑定时触发,只调用一次)
-
unbind:只调用一次,指令与元素解绑时调用
-
inserted (被绑定元素插入父节点时调用) ,父节点一定存在,但不能保证已经插入文档中。
-
update :所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
-
componentUpdated(指令所在vNode及其子vNode全部更新后调用)
自定义指令可以用来设置权限等级
//main.js
Vue.directive('click',function(el,obj){ //简写形式,默认绑定了bind和update
console.log(obj);
})
Vue.directive('color',function(el,obj){
el.style.color=obj.value;
})
let userLevel=4;
Vue.directive('permission',{
inserted:function(el,obj){
if(obj.value<userLevel){
el.parentNode && el.parentNode.removeChild(el);
}
}
}
<template>
<div id='son'>
我是儿子组件
<h2 v-click='name' v-color='"red"' v-font='"12px"' v-permission='3'>自定义指令</h2>
<button v-permission='5'>俺就</button>
</div>
</template>
export default {
name:'Son',
data() {
return {
name:'张三'
};
},
directives:{
font(el,obj){
el.style.fontSize=obj.value;
}
},
}