vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）

Vue.js中的自定义指令是一种非常重要的扩展机制，可以实现在标准DOM元素上添加额外的行为，从而实现更加强大的功能。

Vue.js提供了两种自定义指令的实现方法，一种是内部自定义指令，一种是全局自定义指令。下面将详细讲解如何使用Directive实现这两种自定义指令。

内部自定义指令

内部自定义指令是指在Vue.js组件的template中定义的指令，在组件内部使用的指令。内部自定义指令的语法如下：

<template>
  <div v-my-directive></div>
</template>

<script>
export default {
  directives: {
    'my-directive': {
      bind(el, binding, vnode) {
        // 指令绑定时操作
      },
      update(el, binding, vnode) {
        // 指令更新时操作
      },
      unbind(el, binding, vnode) {
        // 指令解绑时操作
      }
    }
  }
}
</script>

这里通过directives属性来定义指令对象，指令对象包含三个钩子函数：bind、update和unbind。在组件挂载时，bind函数会被调用，用于描述指令绑定时的行为；在组件更新时，update函数会被调用，用于描述指令更新时的行为；在组件销毁时，unbind函数会被调用，用于描述指令解绑时的行为。

下面给出一个示例，实现一个在DOM元素上添加聚焦的功能：

<template>
  <div v-focus></div>
</template>

<script>
export default {
  directives: {
    focus: {
      bind(el) {
        el.focus();
      }
    }
  }
}
</script>

在这个示例中，通过在组件的directives对象中定义一个focus指令，表示在DOM元素上添加聚焦的行为，具体行为是在bind钩子函数中调用元素的focus方法来实现的。

全局自定义指令

全局自定义指令是指在Vue.js应用的整个生命周期内都可以使用的指令。全局自定义指令需要先注册，在注册后，就可以在任何组件的template中使用。

全局自定义指令的注册方法是通过Vue.directive()方法来实现的，语法如下：

import Vue from 'vue';

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    // 指令绑定时操作
  },
  update(el, binding, vnode) {
    // 指令更新时操作
  },
  unbind(el, binding, vnode) {
    // 指令解绑时操作
  }
});

以一个示例来说明全局自定义指令的具体用法，本示例实现鼠标移上去时改变颜色的指令：

<template>
  <div class="square" v-color="'red'"></div>
</template>

<script>
import Vue from 'vue';

Vue.directive('color', {
  bind(el, binding) {
    el.style.backgroundColor = binding.value;
    el.style.transition = 'background-color .5s';
    el.addEventListener('mouseover', () => {
      el.style.backgroundColor = '#ccc';
    });
    el.addEventListener('mouseout', () => {
      el.style.backgroundColor = binding.value;
    });
  }
});
</script>

在这个示例中，我们通过Vue.directive()方法来注册一个名为color的指令，指令的具体行为是在bind钩子函数中操作DOM元素，实现背景色的改变；在mouseover和mouseout事件中，分别实现以不同颜色的交替背景色来实现hover效果。

总之，自定义指令是Vue.js中强大的扩展机制，在实际开发中非常有用，开发者需要按照上述步骤去实现。