Vue：學習筆記（七）-自定義指令

提醒

原帖完整收藏於IT老兵驛站，並會不斷更新。

前言

前面總結到了組件，對混入也進行了研究，不過感受沒有啥須要總結的，就先總結指令吧，參考這裏，記錄筆記。

正文

簡介

1. 全局註冊

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

這裏這個focus方法不太熟，查一下手冊，原來是用來獲取焦點的方法。

2. 局部註冊。

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

鉤子函數

在某個生命週期被回調，就像Vue本身的生命週期，Android的生命週期，暴露一些接口給用戶。

函數簡寫

在不少時候，你可能想在 bind 和 update 時觸發相同行爲，而不關心其它的鉤子。好比這樣寫:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

這段沒有看懂–明白了，上面這段是最簡單的一個自定義指令的寫法。

對象字面量

這個字面量又不懂了，還須要參考手冊。

字面量：These are fixed values, not variables, that you literally provide in your script.。
這個是翻譯過來的意思：字面量是由語法表達式定義的常量；或，經過由必定字詞組成的語詞表達式定義的常量。

初步理解，字面量是一個常量，符合了必定的語法，符合了數組的語法，就是數組字面量，符合了對象的語法，就是對象字面量，大致理解成這樣，看了手冊半天，感受仍是沒有徹底理解。

總結

對於字面量的概念，還須要繼續研究，反覆理解，未來再補充。
對於指令的理解，感受大致都明白了。

參考

https://cn.vuejs.org/v2/guide/custom-directive.html
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus