Vue指令詳解

一個指令定義對象可以提供如下幾個鉤子函數(shù) (均為可選)：

1汤锨、bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用鸳兽。在這里可以進行一次性的初始化設(shè)置锅睛。
2煌茴、inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)双妨。
3淮阐、update：所在組件的 VNode 更新時調(diào)用叮阅，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變泣特，也可能沒有浩姥。但是你可以通過比較更新前后的值來忽略不必要的模板更新 。
4状您、componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用勒叠。
5、unbind：只調(diào)用一次膏孟，指令與元素解綁時調(diào)用眯分。

鉤子函數(shù)的參數(shù) (即 el、binding柒桑、vnode 和 oldVnode)弊决。

指令鉤子函數(shù)會被傳入以下參數(shù)：
1、el：指令所綁定的元素魁淳，可以用來直接操作 DOM 飘诗。
2、binding：一個對象先改，包含以下屬性：
            2-1疚察、name：指令名蒸走，不包括 v- 前綴仇奶。
            2-2、value：指令的綁定值比驻，例如：v-my-directive="1 + 1" 中该溯，綁定值為 2。
            2-3别惦、oldValue：指令綁定的前一個值狈茉，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用掸掸。
            2-4氯庆、expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中扰付，表達式為 "1 + 1"堤撵。
            2-5、arg：傳給指令的參數(shù)羽莺，可選实昨。例如 v-my-directive:foo 中，參數(shù)為 "foo"盐固。
            2-6荒给、modifiers：一個包含修飾符的對象丈挟。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }志电。
3曙咽、vnode：Vue 編譯生成的虛擬節(jié)點。移步 VNode API 來了解更多詳情挑辆。
4桐绒、oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用之拨。

大部分場景 bind 鉤子里綁定一些事件茉继，在unbind 里用解綁事件，inserted操作dom

案例：(自動聚焦輸入框)

src/main.js (注冊全局指令)

import Vue from 'vue'
// 注冊全局指令
// 注冊全局指令
Vue.directive('focus', {
  // bind聲明周期, 只調(diào)用一次蚀乔，指令第一次綁定到元素時調(diào)用烁竭。在這里可以進行一次性的初始化設(shè)置
  bind(el, binding, vnode, oldVnode){
    console.log('bind回調(diào)');
  },
  // 被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)
  inserted(el, binding, vnode, oldVnode){
    console.log('inserted回調(diào)', binding, vnode, oldVnode);
    // 設(shè)置了v-focus 并且值不為空
    if(binding.name == 'focus' && binding.value){
      el.focus()
    }
  },
  // 所在組件的 VNode 更新時調(diào)用吉挣，但是可能發(fā)生在其子 VNode 更新之前派撕。指令的值可能發(fā)生了改變，也可能沒有睬魂。但是你可以通過比較更新前后的值來忽略不必要的模板更新
  update(el, binding, vnode, oldVnode){
    console.log('update回調(diào)', binding);
  },
  // 指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用
  componentUpdated(el, binding, vnode, oldVnode){
    console.log('componentUpdated回調(diào)', binding);
  },
  unbind(el, binding, vnode, oldVnode){
    console.log('unbindd回調(diào)', binding);
  }
})

index.vue

<template>
  <div>
      <input v-focus="true"/>
  </div>
</template>