Vue中directive的钩子函数(bind,inserted等)用法及使用说明

// 自定义一个名为 'focus' 的指令
Vue.directive('focus', {
  // bind 钩子函数，在指令第一次绑定到元素时调用
  bind: function (el) {
    // 给元素添加一个自定义属性，用于标记这个元素被绑定了 focus 指令
    el.setAttribute('data-focus', 'true');
    // 打印一条消息，提示指令已经绑定到元素上
    console.log('指令已绑定到元素上');
  }
});

// 创建一个 Vue 实例
new Vue({
  el: '#app',
  template: '<input v-focus>'
});

// 自定义一个名为 'focus' 的指令
Vue.directive('focus', {
  // inserted 钩子函数，在绑定元素被插入到父节点时调用
  inserted: function (el) {
    // 让元素自动获得焦点
    el.focus();
    // 打印一条消息，提示元素已经插入到 DOM 中
    console.log('元素已插入到 DOM 中');
  }
});

// 创建一个 Vue 实例
new Vue({
  el: '#app',
  template: '<input v-focus>'
});

// 自定义一个名为 'highlight' 的指令
Vue.directive('highlight', {
  // update 钩子函数，在包含组件的 VNode 更新时调用
  update: function (el, binding) {
    // 获取指令的值
    const color = binding.value;
    // 设置元素的背景颜色为指令的值
    el.style.backgroundColor = color;
    // 打印一条消息，提示元素的背景颜色已更新
    console.log('元素的背景颜色已更新');
  }
});

// 创建一个 Vue 实例
new Vue({
  el: '#app',
  data: {
    // 定义一个变量，用于存储背景颜色
    highlightColor: 'yellow'
  },
  template: '<div v-highlight="highlightColor">这是一个高亮的 div</div>'
});

// 自定义一个名为 'highlight' 的指令
Vue.directive('highlight', {
  // componentUpdated 钩子函数，在包含组件的 VNode 及其子 VNode 全部更新后调用
  componentUpdated: function (el, binding) {
    // 获取指令的值
    const color = binding.value;
    // 设置元素的背景颜色为指令的值
    el.style.backgroundColor = color;
    // 打印一条消息，提示元素的背景颜色已在组件更新后更新
    console.log('元素的背景颜色已在组件更新后更新');
  }
});

// 创建一个 Vue 实例
new Vue({
  el: '#app',
  data: {
    // 定义一个变量，用于存储背景颜色
    highlightColor: 'yellow'
  },
  template: '<div v-highlight="highlightColor">这是一个高亮的 div</div>'
});

// 自定义一个名为 'click-outside' 的指令
Vue.directive('click-outside', {
  // bind 钩子函数，在指令第一次绑定到元素时调用
  bind: function (el, binding, vnode) {
    // 定义一个点击事件处理函数
    el.clickOutsideEvent = function (event) {
      // 判断点击事件是否发生在元素外部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果点击事件发生在元素外部，调用指令绑定的方法
        vnode.context[binding.expression](event);
      }
    };
    // 给 document 添加点击事件监听器
    document.addEventListener('click', el.clickOutsideEvent);
  },
  // unbind 钩子函数，在指令与元素解绑时调用
  unbind: function (el) {
    // 移除 document 上的点击事件监听器
    document.removeEventListener('click', el.clickOutsideEvent);
    // 删除元素上的点击事件处理函数
    delete el.clickOutsideEvent;
    // 打印一条消息，提示指令已与元素解绑
    console.log('指令已与元素解绑');
  }
});

// 创建一个 Vue 实例
new Vue({
  el: '#app',
  methods: {
    // 定义一个方法，用于处理点击元素外部的事件
    handleClickOutside: function () {
      console.log('点击了元素外部');
    }
  },
  template: '<div v-click-outside="handleClickOutside">点击这个 div 外部试试</div>'
});