vue 自定義指令

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