Vue-自定义全局指令

Vue自定义指令

Vue指令的声明周期函数：

Vue.directive('gqs',{
   
    bind() {
   
      // 当指令绑定到 HTML 元素上时触发.**只调用一次**
      console.log('bind triggerd')
    },
    inserted() {
   
      // 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 `div#app`)**.但不保证,父元素已经插入了 DOM 文档.**
      console.log('inserted triggerd')
    },
    updated() {
   
      // 所在组件的`VNode`更新时调用.
      console.log('updated triggerd')
    },
    componentUpdated() {
   
      // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
      console.log('componentUpdated triggerd')
      
    },
    unbind() {
   
      // 只调用一次，指令与元素解绑时调用.
      console.log('unbind triggerd')
    }
  })

-unbind() 一个把元素从DOM删除触发unbind().—> 仅仅是删除.
-componentUpdated() 一个显示设置元素的隐藏和显示的时候触发 componentUpdated() —> block | none 都触发.位置发生了改变,也会触发(改变是与Vue操作相关)

显示/隐藏 (v-if & v-show)
样式改变 (:class={active:isActive})
内容改变 (v-model=“text”)