Vue自定义指令详解

Vue自定义指令详解

基本概念

• Vue自定义指令是Vue.js提供的一种扩展语法，用于自定义DOM操作行为。
• 自定义指令通过v-前缀来定义，并且可以带有参数和修饰符两个部分。

注册自定义指令

// 全局注册
Vue.directive('my-directive', {
  // 自定义指令的钩子函数
  bind: function (el, binding, vnode) {
    // 在元素绑定自定义指令时调用，只调用一次
    // el: 指令所绑定的元素，可以用来直接操作DOM
    // binding: 一个对象，包含指令的很多信息
    // vnode: Vue编译生成的虚拟节点
  },
  inserted: function (el, binding, vnode) {
    // 在元素插入到DOM时调用
    // el, binding, vnode同上
  },
  update: function (el, binding, vnode, oldVnode) {
    // 在组件更新时调用，可能会被触发多次
    // el, binding, vnode同上
    // oldVnode: 上一个虚拟节点
  },
  componentUpdated: function (el, binding, vnode, oldVnode) {
    // 在组件更新完成后调用，可能会被触发多次
    // el, binding, vnode同上
    // oldVnode: 上一个虚拟节点
  },
  unbind: function (el, binding, vnode) {
    // 当指令所绑定的元素被解绑时调用
    // el, binding, vnode同上
  }
});

// 局部注册
var myDirective = {
  bind: function (el, binding, vnode) {
    // 与全局注册类似
  }
};

new Vue({
  directives: {
    'my-directive': myDirective
  }
});

使用自定义指令

<!-- 带参数的自定义指令 -->
<p v-my-directive:param1.param2="value"></p>

<!-- 带修饰符的自定义指令 -->
<p v-my-directive.modifier1.modifier2></p>

自定义指令示例

1. v-focus

// 这里的参数value是v-focus的值，可以是任意类型的值
// 指令绑定时，自动获取焦点
// 指令解绑时，自动失去焦点
Vue.directive('focus', {
  inserted: function (el, {value}) {
    el.focus();
  },
  unbind: function (el) {
    el.blur();
  }
});

使用：

<input type="text" v-focus>

2. v-number

// 只允许输入数字，如果输入不合法，则自动清空输入框
Vue.directive('number', {
  bind: function (el) {
    el.handler = function (event) {
      event.target.value = event.target.value.replace(/[^\d]/g, '');
      if (event.target.value === '' || isNaN(Number(event.target.value))) {
        event.target.value = '';
      }
    };
    el.addEventListener('input', el.handler);
  },
  unbind: function (el) {
    el.removeEventListener('input', el.handler);
  }
});

使用：

<input type="text" v-number>