vue自訂指令

除了預設設定的核心指令( v-model 和 v-show ),Vue 也允許註冊自訂指令。請注意，在 Vue2.0 裡面，程式碼復用的主要形式和抽像是元件－然而，有的情況下,你仍然需要對純DOM元素進行底層操作,這時候就會用到自訂指令。

當頁面載入時，該元素將獲得焦點 (注意：autofocus 在行動版 Safari 上不運作)。事實上，只要你在打開這個頁面後還沒點擊過任何內容，這個輸入框就應該還是處於聚焦狀態。現在讓我們用指令來實現這個功能：（推薦學習：JavaScript視訊教學）

// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', {  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {    // 聚焦元素
    el.focus()
  }
})

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

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

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

<input v-focus>

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

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

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

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

componentUpdated：指令所在元件的 VNode 及其子 VNode 全部更新後呼叫。

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

更多JavaScript相關技術文章，請造訪js教學欄位進行學習！

以上是vue自訂指令的詳細內容。更多資訊請關注PHP中文網其他相關文章！