vue directive具體的使用方法

1、一個指令定義對象能夠提供以下幾個鉤子函數 (均爲可選)：

• bind：只調用一次，指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置。(注意：binding這個詞綁定，顧名思義在這個bind中進行綁定函數)

• inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不必定已被插入文檔中)。 （實際的效果的實現，dom操做等等，樣式渲染）

• update：所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前。指令的值可能發生了改變，也可能沒有。可是你能夠經過比較更新先後的值來忽略沒必要要的模板更新 (詳細的鉤子函數參數見下)。

• componentUpdated：指令所在組件的 VNode 及其子 VNode 所有更新後調用。

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

 

2、指令鉤子函數會被傳入如下參數：

• el：指令所綁定的元素，能夠用來直接操做 DOM 。
• binding：一個對象，包含如下屬性：vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。
  • name：指令名，不包括 v- 前綴。
  • value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值爲 2。
  • oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。不管值是否改變均可用。
  • expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式爲 "1 + 1"。
  • arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數爲 "foo"。
  • modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象爲 { foo: true, bar: true }。
• oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

3、具體事例

一、clickoutside.js

用途：clickoutside.js主要用於解決點解元素外的地方時執行函數  主要應用的常見有彈出層點擊遮罩層是隱藏窗口，或者一些彈出層點擊其餘地方要消失的場景

v-clickoutside具體是怎麼實現的

答：主要是經過在bind中定義函數 經過判斷是否包含元素，執行binding.value函數

 

export default {
  /*
   @param el 指令所綁定的元素
   @param binding {Object} 
   @param vnode vue編譯生成的虛擬節點
   */
  bind (el, binding, vnode) {
    const documentHandler = function(e) {   
      if(!vnode.context || el.contains(e.target)) {
        return false;
      }
      if (binding.expression) {
        binding.value(e)
      }
    }
 
      document.addEventListener('click', documentHandler)
  },
  update (el, binding) {
  
  },
  unbind(el) {
    document.removeEventListener('click', documentHandler);
  }
}