vue如何添加全局指令

在Vue.js中，你可以通过Vue原型链来添加全局指令。全局指令可以在整个应用的任何组件中直接使用而无需显式地在每个组件上注册。下面是一个简单的步骤：

1. 创建自定义指令：
首先，创建一个JavaScript文件，例如`my-directive.js`，并定义你的全局指令函数。示例代码如下：

// my-directive.js
export default {
  install(Vue) {
    Vue.directive('custom-directive', {
      // 指令名称
      name: 'custom-directive',
      // 指令的作用范围，如v-bind、v-on等
      bind(el, binding, vnode) {
        console.log('指令bind触发');
        // 当元素插入DOM时执行的回调
        el.addEventListener('click', function () {
          console.log('点击了带有custom-directive的元素');
          // 执行绑定的表达式的值
          console.log(binding.value);
        });
      },
      update(value, oldVnode) {
        console.log('指令更新');
      },
      unbind(el, binding, vnode) {
        console.log('指令unbind触发');
        // 移除事件监听
        el.removeEventListener('click', ...);
      }
    });
  }
};

2. 将指令导出安装到Vue实例上：
在你的主入口文件（通常是`main.js`）里，导入并安装这个自定义指令：

import MyDirective from './my-directive';

Vue.use(MyDirective);

现在，你已经在Vue实例上添加了一个名为`custom-directive`的全局指令。在模板中可以直接使用`v-custom-directive="expression"`来应用这个指令。