// 在Vue实例中定义自定义指令
Vue.directive('my-directive', {
  // 指令生命周期钩子
  bind(el, binding, vnode) {
    // 在指令绑定到元素时调用，只调用一次
    // el：指令所绑定的元素
    // binding：指令的绑定信息，包括值、修饰符等
    // vnode：Vue编译生成的虚拟节点

    // 指令绑定时的初始化操作
    el.textContent = 'Initialized!';
  },

  inserted(el, binding, vnode) {
    // 在被绑定元素插入到父节点时调用
    // 只保证父节点存在，但不一定已经插入到文档中

    // 执行插入后的操作
    el.textContent = 'Inserted!';
  },

  update(el, binding, vnode, oldVnode) {
    // 在组件更新时调用，可能会触发多次

    // 执行更新操作
    el.textContent = 'Updated!';
  },

  componentUpdated(el, binding, vnode, oldVnode) {
    // 在组件及其子组件更新完成后调用

    // 执行更新完成后的操作
    el.textContent = 'Component Updated!';
  },

  unbind(el, binding, vnode) {
    // 在指令从元素上解绑时调用

    // 执行解绑操作
    el.textContent = 'Unbind!';
  }
});