指令就是在inserted上操作dom元素

全局注冊

// 注冊在整個大Vue上
Vue.directive('focous', {
    // 當(dāng)被綁定的元素插入到DOM中時
    inserted: function(el) {
        el.focus() // 聚焦元素      
    }
})

局部注冊

directives: {
    founs: {
        inserted: function(el) {
            el.focus()
        }
    }
}

鉤子函數(shù)及其參數(shù)

• bind: 只能調(diào)用一次，指令第一次綁定到元素時調(diào)用，可以進行初始化配置
• inserted: 被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。
• update: 所在組件的 VNode 更新時調(diào)用
• componentUpdated: 指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用
• unbind: 只調(diào)用一次，指令與元素解綁時調(diào)用。

每個鉤子函數(shù)都有下面的參數(shù) bind(el, binding, vnode, oldVnode)

參數(shù)

• el: 指令所綁定的元素，可以用來直接操作 DOM。
• binding: 一個對象，包含以下屬性
  • name: 指令名
  • value: 指令綁定的值 v-my-directive="1 + 1" 中的 2
  • oldValue: 指令綁定的前一個值，傳給指令的值 僅在 update 和 componentUpdated 鉤子中可用
  • expression: 字符串形式的指令表達式 ‘1+1’
  • arg: 傳遞給指令的參數(shù) v-my-directive:foo => foo
  • modifiers: 一個包含裝飾符的對象。v-my-directive.foo.bar => { foo: true, bar: true }
  • vnode: Vue編譯生成的虛擬節(jié)點
  • oldVnode: 上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用

渲染函數(shù)中的自定義指令

// 自定義指令是個數(shù)組，每個對象都是一個自定義指令
directives: [
    {
      name: 'my-custom-directive',
      value: '2', // 傳遞給指令的值
      expression: '1 + 1', // 傳遞給指令的表達式
      arg: 'foo', // 傳遞給指令的變量
      modifiers: { // 傳遞給指令的修飾符
        bar: true
      }
    }
  ]

• 在渲染函數(shù)中可以寫一個方法把 一個指令變成directives 數(shù)組對象的形式 _vm'loading=${loading}'