vue之自定义指令

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;
  	  }
  	},
  }