鉤子函式

vue除了預設內建的指令，也允許自定義指令。先了解一下鉤子函式：

一個指令定義物件可以提供如下幾個鉤子函式 (均為可選)：

• bind：只調用一次，指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。

• inserted：被繫結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入文件中)。

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

• componentUpdated：指令所在元件的 VNode 及其子 VNode

  全部更新後呼叫。

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

鉤子函式傳入的引數：

• el：指令所繫結的元素，可以用來直接操作 DOM。
• binding：一個物件，包含以下 property：
  • name：指令名，不包括 v- 字首。
  • value：指令的繫結值，例如：v-my-directive="1 + 1" 中，繫結值為 2。
  • oldValue：指令繫結的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
  • expression：字串形式的指令表示式。例如 v-my-directive="1 + 1" 中，表示式為 "1 + 1"
    。
  • arg：傳給指令的引數，可選。例如 v-my-directive:foo 中，引數為 "foo"。
  • modifiers：一個包含修飾符的物件。例如：v-my-directive.foo.bar 中，修飾符物件為 { foo: true, bar: true }。
• vnode：Vue 編譯生成的虛擬節點
• oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

參照：https://cn.vuejs.org/v2/guide/custom-directive.html

指令建立

指令也可以分為全域性指令與區域性指令，下面舉個例子說明。

場景：輸入框限制只能輸入數字，數字意外的字元通通置空。

//指令傳參與v-model一致即可
<el-input v-model="name" v-num-only="'name'" />
<el-input v-model="form.name" v-num-only="'form.name'">
<el-input v-model="form.name" v-num-only="'form.obj.name'">

全域性指令

Vue.directive('numOnly', { 
  update: (el, bind, vnode) => { 
    const reg = /^[0-9]*$/
　　//由於輸入框是用的el-input,實際會多出一層div,所以要用el.firstElementChild.value才能取到輸入框的值，如果是普通輸入框，直接用el.value即可
    if (!reg.test(el.firstElementChild.value)) {
      el.firstElementChild.value = el.firstElementChild.value.replace(/\D/g, '')
      const arr = bind.value.split('.')
      if (arr.length === 1) {
        vnode.context[arr[0]] = ''
      }
      if (arr.length === 2) {
        vnode.context[arr[0]][arr[1]] = el.firstElementChild.value
      }
      if (arr.length === 3) {
        vnode.context[arr[0]][arr[1]][arr[2]] = el.firstElementChild.value
      }
    }
  }
})

區域性指令

export default {
  name: '',
  directives: {
    numOnly: {
      //與上面一致
    }
  }
  data(){
     return {}
  }
}