vue2 自定义指令

Vue.js 2 中，可以通过自定义指令来扩展 Vue 实例的功能。自定义指令可以用来操作 DOM，监听事件，执行动画等。下面是一个简单的例子：

// 注册全局自定义指令
Vue.directive('my-directive', {
  bind: function (el, binding, vnode) {
    // 指令绑定到元素上时调用

    // el: 指令所绑定的元素
    // binding: 一个对象，包含以下属性：
    //   - name：指令的名称（不包括 v- 前缀）
    //   - value：指令的绑定值
    //   - oldValue：指令的前一个绑定值
    //   - expression：指令的绑定表达式
    //   - arg：传递给指令的参数
    //   - modifiers：一个包含修饰符的对象
    // vnode: Vue 编译生成的虚拟节点

    // 在这里可以执行一些初始化操作或添加事件监听器等
  },
  inserted: function (el, binding, vnode) {
    // 指令所在元素插入到 DOM 中时调用
  },
  update: function (el, binding, vnode, oldVnode) {
    // 指令所在元素的绑定值更新时调用
  },
  componentUpdated: function (el, binding, vnode, oldVnode) {
    // 指令所在组件的 VNode 更新时调用
  },
  unbind: function (el, binding, vnode) {
    // 指令与元素解绑时调用
  }
});

然后，在模板中可以使用该自定义指令：

<div v-my-directive="someValue"></div>

这里的 `someValue` 可以是 Vue 实例的数据，也可以是固定的字符串等。在自定义指令的钩子函数中，你可以根据需要对元素进行操作，例如修改样式、添加事件监听器等。