Vue自定義指令

• 爲什麼用？

  vue本身已經有很多內置指令，如v-model、v-html、v-if、v-else、v-for等，這些指令使用起來非常方便，但是有些時候內置指令不能完全要求，需要自定指令，通常用於局部修改DOM，例如：頁面加載時，某個輸入框獲得焦點（autofocus工作的情況下）。

  // 註冊一個全局自定義指令 `v-focus`
  Vue.directive('focus', {
    // 當被綁定的元素插入到 DOM 中時……
    inserted: function (el) {
      // 聚焦元素
      el.focus()
    }
  })
  
  //局部註冊，組件中添加以下代碼
  directives: {
    focus: {
      // 指令的定義
      inserted: function (el) {
        el.focus()
      }
    }
  }
  
  //使用
  <input v-focus>
  

• 怎麼用？

  • 全局定義

    Vue.directive('directiveName', {
        //僅調用一次，指令第一次綁定到元素時調用，在這裏添加一次性的初始化設置
        bind:function(el,binding,vnode,oldVnode){
            //el 指令所綁定的元素，可以用來操作DOM，例如el.focus()
            //el.focus()
        },
        //被綁定元素插入父節點時調用（僅保證父節點存在，但不一定已被插入文檔中）
        inserted:function(el,binding,vnode,oldVnode){
            //binding 一個對象包含以下屬性
            //name  指令名
            //value  指令綁定的值
            //oldValue  指令綁定的前一個值
            //expression 字符串形式的指令表達式
            //arg  傳給指令的參數
            //modifiers  一個包含修飾符的對象
        },
        //所有組件的VNode更新時調用，但是可能發生在其子VNode更新之前，指令的值可能發生了改變，也可能沒有，可通過比較更新前後值（value、oldValue ）忽略不必要的模板更新
        update:function(el,binding,vnode,oldVnode){
            //vnode  Vue編譯生成的虛擬節點
            //oldVnode  上一個虛擬節點
        },
        //指令所在組件的VNode及其子VNode全部更新後調用
        componentUpdated:function(el,binding,vnode,oldVnode){
        },
        //只調用一次，指令與元素解綁時調用
        unbind:function(el,binding,vnode,oldVnode){}
    })
    

    tips:除了el之外，其他參數都應該是隻讀的，切勿進行修改。如果需要在鉤子之間共享數據，建議通過元素的 dataset來進行。

  • 局部定義

    directives: {
      directiveName: {
        bind: function (el,binding,vnode,oldVnode) {},
        inserted: function (el,binding,vnode,oldVnode) {},
        update: function (el,binding,vnode,oldVnode) {},
        componentUpdated: function (el,binding,vnode,oldVnode) {},
        unbind: function (el,binding,vnode,oldVnode) {}
      }
    }
    

  • 動態指令參數

    //指定動態指令參數
    <p v-test:[argument]="value"></p>
    
    //獲取動態指令參數
    Vue.directive('test', {
      bind: function (el, binding, vnode) {
        console.log(binding.arg);
      }
    })
    

  • 對象字面量形式傳多個值到指令

    //傳入多個值到指令
    <div v-test="{ color: 'white', text: 'hello!' }"></div>
    
    //獲取傳入的多個值
    Vue.directive('test', function (el, binding) {
      console.log(binding.value.color) // => "white"
      console.log(binding.value.text)  // => "hello!"
    })