最近公司要重寫運營管理系統，不想再維護之前的backbone了，趕緊要求前端整個重寫。重開新坑，用了兩週多擼出了第一版，收穫很大。在實踐中學習永遠都是最高效的。趁熱把學到的東西都記錄總結下來，也算簡單梳理一下思路。

相關部落格：

自定義指令

參考資料：自定義指令

Vue預設有v-if,v-show等指令，我們也可以根據需求，自定義一些常用的指令。比如表單介面需要autoFocue，那麼我們可以使用Vue的自定義指令功能，來製造一個v-focus指令，之後，只要在需要自動獲得焦點的元素上邊加上這個指令即可。
比如：

// 註冊一個全域性自定義指令 `v-focus`
 

Vue.directive('focus', {
  // 當被繫結的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 想註冊區域性自定義指令，只要在元件種使用directives選項即可：
directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}
// 使用
<input v-focus>

鉤子函式

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

• bind：只調用一次，指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。
• inserted：被繫結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入文件中)。
• update：所在元件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。
• componentUpdated：指令所在元件的 VNode 及其子 VNode 全部更新後呼叫。
• unbind：只調用一次，指令與元素解綁時呼叫。