vue 自定義指令

註冊指令

• 全局註冊
• 局部註冊

Vue.directive('focus',{
    inserted: function(el){
        el.focus()
    }
})

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

鉤子函數

• bind：只調用一次，指令第一次綁定到元素時使用
• inserted: 被綁定元素插入父節點時調用
• update: 所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前
• componentUpdated：指令所在組件的 VNode 及其子 VNode 所有更新後調用
• unbind：只調用一次，指令與元素解綁時調用

鉤子函數參數

• el：指令所綁定的元素，能夠直接用來操做 DOM

• binding：一個對象，包含有

  • name：指令名，不包括 v- 前綴
  • value：指令的綁定值
  • expression：字符串形式的指令表達式
  • arg：傳給指令的參數
  • modifiers：一個包含修飾符的對象
• vnode：vue編譯生成的虛擬節點
• oldVnode：上一個虛擬節點