Vue除了核心功能內置的指令（v-model和v-show）外，也允許註冊自定義指令。雖然在Vue2.0中代碼複用的主要形式是組件，但有的情況，仍然需要對普通的DOM元素進行底層操作，這個時候就會用自定義指令。

那麼先舉個例子，比如我們想要自動聚焦輸入框。當打開頁面時，什麼都沒做的情況下就讓輸入框處於聚集狀態。如圖：

上代碼：

<code>HTML
/<code>

<code>// 註冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})/<code>

如果不想註冊全局的，我們只想它在某個頁面或者組件中註冊，那麼就寫在 使用的地方：

<code>HTML
<template>
  

    
{{ msg }}
    
    
  

/<template>/<code>

<code>JS
export default {
  name: 'directive',
  data () {
    return {
      msg: '自定義指令directive'
    }
  },
  directives: {
    focus: {
      inserted: function(el){
        //聚焦輸入框 

        el.focus();
      }
    },
  }
}/<code>

Inserted表示，被綁定元素插入父節點時調用。

同時還有：

Bind：指令第一次綁定到元素時調用，只調用一次

Update：被綁定與元素所在模板更新時調用，而且無論綁定值是否有變化，通過比較更新前後的綁定值，忽略不必要的模板更新

componentUpdate :被綁定的元素所在模板完成一次更新更新週期的時候調用

unbind: 只調用一次，指令月元素解綁的時候調用

見代碼：

<code>HTML
<template>
  

    
{{ msg }}
      
    
{{ count }}
      
    
    
******************************************

    {{count}}
    <button> 點擊開始加1/<button> 

  

/<template>/<code>

<code>JS
export default {
  name: 'directive',
  data () {
    return {
      count: 10,
      color:"red",
      msg: '自定義指令directive'
    }
  },
  methods: {
    add: function(){
      this.count++;
    }
  },
  directives: {
    focus: {
      inserted: function(el){
        el.focus();
      }
    },

    hello: {
      bind:function(el,vbind,vnode){
          el.style["color"] = vbind.value;
          console.log("1-bind");
      },
      inserted:function(){
          console.log("2-insert");
      },
      update:function(){
          console.log("3-update");
      },
      componentUpdated:function(){
          console.log('4 - componentUpdated');
      },
      unbind:function(){
          console.log('5 - unbind');
      }
    }
  }
}/<code>

效果：

除此之外還有動態指令參數：

指令的參數可以是動態的。例如，在 v-mydirective:[argument]="value" 中，argument 參數可以根據組件實例數據進行更新！這使得自定義指令可以在應用中被靈活使用。

例如你想要創建一個自定義指令，用來通過固定佈局將元素固定在頁面上。我們可以像這樣創建一個通過指令值來更新豎直位置像素值的自定義指令：

<code>HTML
<template>
  

    
{{ msg }}

    
定位到距離頁面頂部 200px

  

/<template>/<code>

<code>js
export default {
  name: 'directive',
  data () {
    return {
      msg: '自定義指令directive動態指令參數'
    }
  },
  directives: {
    pin: {
      bind: function (el, binding, vnode) {
        //設置position為fixed，資助距離頂部200px
        el.style.position = 'fixed'
        el.style.top = binding.value + 'px'
      }
    },
  }
}/<code>

這會把該元素固定在距離頁面頂部 200 像素的位置。

函數簡寫

在很多時候，你可能想在 bind 和 update 時觸發相同行為，而不關心其它的鉤子。比如這樣寫：

<code>HTML
<template>
  

    
{{ msg }}

    {{msg}}
  

/<template>/<code>

<code>JS
export default {
  name: 'directive',
  data () {
    return {
      red: 'red',
      msg: '自定義指令directive動態指令參數'
    }
  },
  directives: {
    //直接寫，不用綁定到任何生命週期上
    colorswatch:  function (el, binding){
      el.style.backgroundColor = binding.value //設置背景顏色為red
    },
  }
}/<code>

對象字面量

如果指令需要多個值，可以傳入一個 JavaScript 對象字面量。記住，指令函數的 JavaScript 表達式一定要合法。

<code>HTML
<template>
  

    
{{ msg }}

    

  

/<template>/<code>

<code>JS
export default {
  name: 'directive',
  data () {
    return {
      red: 'red',
      msg: '自定義指令directive動態指令參數'
    }
  },
  directives: {
    demo:  function (el, binding){
      // 在控制檯打印
      console.log(binding.value.color) // => "white"
      console.log(binding.value.text)  // => "hello!"
    },
  }
}/<code>

打開控制檯，我們可以看到已經打印出了：

Ok，以上就是Vue自定義指令的所有內容。

閱讀更多 肆拾手記 的文章

關鍵字: 自定義 補缺 HTML