除了預設設定的核心指令 (v-model 和 v-show)，Vue 也允許註冊自定義指令。

區域性自定義指令(只針對元件內的元素)

父元件app.vue

<template>
  <div id="app">
    <test-api></test-api>
  </div>
</template>

<script>
import testApi from './components/testApi.vue'
export default {
  data (){
    return {

    }
  },
  watch:{

  },
  methods:{

  },
  components:{
    testApi
  }
}
 
</script>

<style ></style>

子元件testApi.vue

<template>
  <div>
    <!-- 讓input元素在開啟頁面的時候就獲得焦點 -->
    <input type="text" v-autoFocus >
  </div>
</template>

<script>
export default {
  directives:{
    // 自定義指令的名字
    autoFocus:{
      // 鉤子函式，被繫結元素插入父節點時呼叫 (父節點存在即可呼叫，不必存在於 document 中)。
 

      inserted(el){
        el.focus()
        console.log( 'inserted' );
      },
      // 只調用一次，指令第一次繫結到元素時呼叫，用這個鉤子函式可以定義一個在繫結時執行一次的初始化動作。
      bind(){
        console.log( 'bind' );
      },
      // 所在元件的 VNode 更新時呼叫，但是可能發生在其孩子的 VNode 更新之前。
      // 指令的值可能發生了改變也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 
      update(){
        console.log( 'update'
 
 );
      },
      // 所在元件的 VNode 及其孩子的 VNode 全部更新時呼叫。
      componentUpdated(){
        console.log( 'componentUpdated' );
      },
      // 只調用一次，指令與元素解綁時呼叫。
      unbind(){
        console.log( 'unbind' );
      }

    }
  },
  data () {
    return {

    }  
  },
  props:[],
  methods:{

  },
  created(){

  },
  mounted(){

  },
  components:{

  }
}
</script>

<style scoped></style>

效果圖：

定義全域性自定義指令

在任意頁面的任意input里加上v-autoFcs

Vue.directive('autoFcs',{
  // 鉤子函式，被繫結元素插入父節點時呼叫 (父節點存在即可呼叫，不必存在於 document 中)。
  inserted(el){
    el.focus()
    console.log( 'inserted' );
  },
  // 只調用一次，指令第一次繫結到元素時呼叫，用這個鉤子函式可以定義一個在繫結時執行一次的初始化動作。
  bind(){
    console.log( 'bind' );
  },
  // 所在元件的 VNode 更新時呼叫，但是可能發生在其孩子的 VNode 更新之前。
  // 指令的值可能發生了改變也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 
  update(){
    console.log( 'update' );
  },
  // 所在元件的 VNode 及其孩子的 VNode 全部更新時呼叫。
  componentUpdated(){
    console.log( 'componentUpdated' );
  },
  // 只調用一次，指令與元素解綁時呼叫。
  unbind(){
    console.log( 'unbind' );
  }
})

效果圖:

自定義指令的鉤子函式

鉤子函式
指令定義函式提供了幾個鉤子函式 (可選)：

• bind：只調用一次，指令第一次繫結到元素時呼叫，用這個鉤子函式可以定義一個在繫結時執行一次的初始化動作。

• inserted：被繫結元素插入父節點時呼叫 (父節點存在即可呼叫，不必存在於 document 中)。

• update：所在元件的 VNode 更新時呼叫，但是可能發生在其孩子的 VNode 更新之前。指令的值可能發生了改變也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函式引數見下)。

• componentUpdated：所在元件的 VNode 及其孩子的 VNode 全部更新時呼叫。

• unbind：只調用一次，指令與元素解綁時呼叫。

接下來我們來看一下鉤子函式的引數 (包括el，binding，vnode，oldVnode)。

自定義指令鉤子函式的引數

鉤子函式引數
鉤子函式被賦予了以下引數：

• el：指令所繫結的元素，可以用來直接操作 DOM 。

• binding：一個物件，包含以下屬性：

  • name：指令名，不包括v-字首。

  • value：指令的繫結值，例如：v-my-directive=”1 + 1”, value 的值是2。

  • oldValue：指令繫結的前一個值，僅在update和componentUpdated鉤子中可用。無論值是否改變都可用。

  • expression：繫結值的字串形式。例如v-my-directive=”1 + 1”，expression 的值是”1 + 1”。

  • arg：傳給指令的引數。例如v-my-directive:foo，arg 的值是”foo”。

  • modifiers：一個包含修飾符的物件。例如：v-my-directive.foo.bar, 修飾符物件 modifiers 的值是{ foo: true, bar: true }。

  • vnode：Vue 編譯生成的虛擬節點，查閱 VNode API 瞭解更多詳情。

  • oldVnode：上一個虛擬節點，僅在update和componentUpdated
    鉤子中可用。

例子

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>

Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})
new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})