Vue 淺談自定義指令 directive

自定義指令

 

用途：需要對普通 DOM 元素進行底層操作

除了核心功能默認內置的指令 ( 和 )，Vue 也允許註冊自定義指令。注意，在 Vue2.0 中，代碼複用和抽象的主要形式是組件。然而，有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。

 

🌰 例子：輸入框獲取焦點

 

1. 定義 v-focus 指令

(1) 全局自定義指令

// main.js

// 註冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

 （2）局部自定義指令

如果想註冊局部指令，組件中也接受一個 directives 的選項：

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

2. 使用 v-focus 指令

然後你可以在模板中任何元素上使用新的 v-focus property，如下：

<input type="text"  v-focus >

 

 

鉤子函數

• bind：只調用一次，指令第一次綁定到元素時調用。在這裏可以進行一次性的初始化設置。

• inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。

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

• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新後調用。

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

Vue.directive('mydirective', {
    bind() {},
    inserted() {},
    update() {},
    componentUpdated() {},
    unbind() {}
});