vue2自定义指令的语法

Vue 2中的自定义指令是一种特殊的行为，它允许你扩展HTML元素的功能。自定义指令通常由两个部分组成：`v-<指令名>`绑定和一个或多个选项（如`expression`、`method`等）。下面是一个简单的自定义指令示例：

<!-- HTML 使用 -->
<button v-my-directive="message" @click="changeMessage"></button>

<!-- JavaScript (Vue实例) -->
export default {
  directives: {
    // 定义名为my-directive的指令
    myDirective: {
      // handler 函数会在元素插入到DOM时执行，接收 element 和 directive 的属性作为参数
      inserted: function (el, binding, vnode) {
        el.textContent = binding.value;
      },
      // 更新函数会在表达式改变时执行，更新元素内容
      update: function (el, binding, vnode) {
        el.textContent = binding.value;
      }
    }
  },
  data() {
    return { message: 'Hello from Vue!' };
  },
  methods: {
    changeMessage() {
      this.message = '指令已更新!';
    }
  }
}

在这个例子中，当你点击按钮时，会触发`changeMessage`方法，改变`message`的数据，进而触发`my-directive`的更新，显示新的文本。