提醒

原帖完整收藏於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