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 钩子中可用。