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)
  }
})