vue 自定義指令篇
關於vue的指令，有我們熟習的v-model、v-show等，但我們也能夠本身定義我們須要的指令，如比較經常使用的v-lazy懶加載
官方細緻文檔：https://cn.vuejs.org/v2/guide…
經由過程directive就能夠在Vue上註冊指令

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

一個指令定義對象能夠供應以下幾個鈎子函數 (均為可選)：

bind：只挪用一次，指令第一次綁定到元素時挪用。在這裡能夠舉行一次性的初始化設置。

inserted：被綁定元素插進去父節點時挪用 (僅保證父節點存在，但不肯定已被插進去文檔中)。

update：地點組件的 VNode 更新時挪用，然則能夠發生在其子 VNode 更新之前。指令的值能夠發生了轉變，也能夠沒有。然則你能夠經由過程比較更新前後的值來疏忽不必要的模板更新 (細緻的鈎子函數參數見下)。

componentUpdated：指令地點組件的 VNode 及其子 VNode 悉數更新后挪用。

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

指令模塊化
比方我們熟習的v-show，不看源碼，我們剖析v-show這個指令的功用，v-show=”true || false”顯現或許因而節點，但元素不佔有其原本的空間。因而這能夠經由過程我們經常使用的display=”none”一樣
我們的主意是註冊一個指令，經由過程給鈎子函數通報參數true 或 false去轉變節點的display的值

stealth.js

// 元素隱蔽顯現指令
export default {
  // 只挪用一次，指令第一次綁定到元素時挪用
  bind (el, binding, vnode) {
    el.style.display = binding.value ? 'block' : 'none'
  },
  // 被綁定元素插進去父節點時挪用
  inserted (el, binding, vnode) {
    console.log('inserted')
  },
  // 地點組件的 VNode 更新時挪用
  update (el, binding, vnode) {
    console.log('update')
    el.style.display = binding.value ? 'block' : 'none'
  },
  // 指令地點組件的 VNode 及其子 VNode 悉數更新后挪用
  componentUpdated (el, binding, vnode) {
    console.log('componentUpdated')
  },
  unbind (el, binding, vnode) {
    console.log('unbind')
  }
}

指令模塊化，經由過程index.js治理自定義指令。增加新指令只需在modules中到場模塊，並引入
index.js

import stealth from './modules/stealth'
export {stealth}

全局Vue中經由過程directive綁定悉數指令
mian.js

import * as directives from './directives'
// 註冊指令
Object.keys(directives).forEach(k => Vue.directive(k, directives[k]))

營業組件中，到場v-*(指令名)

<div v-stealth="true"></div>

我們勝利完成自定義指令的模塊化

完全項目github地點：https://github.com/hty7/vue-demo