vue自定義指令directive(盒子拖拽)、鈎子函數

自定義指令

除了核心功能預設内置的指令 (如v-model 和 v-show等)，Vue 也允許注冊自定義指令。有的情況下，對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。

分為兩種：全局自定義指令、局部自定義指令

**全局自定義指令：**一般在main.js中定義

// 為綁定的元素自動擷取焦點：
   Vue.directive('focus', {
      inserted: function (el) { // inserted 表示被綁定元素插入父節點時調用
        el.focus();
      }
    });
           

組建中：

<div id="app">
    <input type="text" v-focus />
</div>
           

局部自定義指令：

實作盒子的拖拽

<template>
  <div>
    <div id="darg" v-dirg></div>
  </div>
</template>

<script>
export default {
  name: "Teacheradministration",
  methods: {},
  directives: {
    dirg: {
      inserted: function(el) {
        el.onmousedown = function(e) {
          var x = e.clientX - el.offsetLeft;
          var y = e.clientY - el.offsetTop;
          document.onmousemove = function(eve) {
            el.style.left = eve.clientX - x + "px";
            el.style.top = eve.clientY - y + "px";
          };
          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  }
};
</script>

<style>
#darg {
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
  top: 100px;
  left: 100px;
}
</style>
           

自定義指令有兩個參數：

• 參數1 ：指令的名稱
• 參數2 ：是一個對象，這個對象身上，有

  鈎子函數

  .

鈎子函數

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

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

bind：隻調用一次，指令第一次綁定到元素時調用。在這裡可以進行一次性的初始化設定。

update：所在元件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模闆更新 (詳細的鈎子函數參數見下)。

componentUpdated：指令所在元件的 VNode 及其子 VNode 全部更新後調用。

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

鈎子函數也有參數：

el：指令所綁定的元素，可以用來直接操作 DOM 在每個函數中，第一個參數el ，表示被綁定了指令的那個元素，這個 el 參數，是一個原生的JS對象,。

binding：一個對象，包含以下屬性：

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 }。

vnode： Vue編譯生成的虛拟節點。移步 VNode API 來了解更多詳情。

oldVnode：上一個虛拟節點，僅在 update 和 componentUpdated 鈎子中可用。