vue-directive(自定义指令)

 

<button @click="$router.push('/login')" v-botton>directive</button>

export default {
  name: "directive",
  directives: {
    botton: {
      bind: function (el,binding,vnode) { //dom树绘制前调用  el为当前节点，binding为对象，很少用，  vnode vue对象
      },
      inserted: function (el,binding,vnode) { //绘制后 父节点存在时
      },
      unbind: function (el,binding,vnode) { //销毁时
      },
      componentUpdated:function(el,binding,vnode){ //组件更新后的状态
      },
      update:function(el,binding,vnode){ //组件更新前的状态
      }
    },
}

全局注册 在main.js

Vue.directive('directive-span',{
  bind:function(el){
    console.log(el)
    el.style.color='red'
  },
  inserted:function(el){
    console.log(el,'inserted')
    setTimeout(()=>{
      el.style.color='blue'
    },2000)
  }
})