vue中自定义指令（directive）的基本使用方法

Vue中自定义指令的基本使用方法

什么是指令

Vue的指令（Directive）是一种特殊的指令语法，其作用是对HTML元素进行特定的操作。Vue内置了很多指令，如v-model、v-if、v-bind等。Vue还提供了一种自定义指令的方式，方便我们扩展指令。

注册指令

注册指令的方式有两种，全局注册和局部注册。

全局注册：

Vue.directive('mydirective', {
  bind(el, binding, vnode) { // 指令绑定到元素时调用
    el.innerText = '这是我的自定义指令';
  },
  inserted(el, binding, vnode) { // 指令元素插入到文档中调用
    console.log('元素插入到文档中');
  },
  update(el, binding, vnode, oldVnode){ // 指令所在元素更新时调用
    console.log('元素更新了');
  }
});

局部注册：

new Vue({
  el: '#app',
  directives: {
    mydirective: {
      bind(el, binding, vnode) { // 指令绑定到元素时调用
        el.innerText = '这是我的自定义指令';
      },
      inserted(el, binding, vnode) { // 指令元素插入到文档中调用
        console.log('元素插入到文档中');
      },
      update(el, binding, vnode, oldVnode){ // 指令所在元素更新时调用
        console.log('元素更新了');
      }
    }
  }
});

使用指令

注册好自定义指令后，我们可以在Vue实例的模板中使用：

<div id="app">
  <p v-mydirective></p>
</div>

或者传入指令参数：

<div id="app">
  <p v-mydirective:arg1.modifier1.modifier2="value"></p>
</div>

指令参数的格式为：v-mydirective:arg.modifier1.modifier2="value"，其中，arg是指令参数，modifier1和modifier2是指令修饰符，value是指令的绑定值。我们可以在指令定义中使用binding.arg、binding.modifiers和binding.value来获取这些值。

示例

指令实现波浪线效果

我们可以通过自定义指令来实现给元素添加波浪线效果：

Vue.directive('wave', {
  bind(el, binding, vnode) { // 指令绑定到元素时调用
    el.style.textDecoration = 'underline';
    el.style.webkitTextDecorationStyle = 'wavy';
  }
});

在模板中使用：

<div id="app">
  <p v-wave>这是一段有波浪线的文本</p>
</div>

指令实现图像懒加载

我们可以通过自定义指令来实现图像懒加载：

Vue.directive('lazyload', {
  bind(el, binding, vnode) { // 指令绑定到元素时调用
    const img = new Image();
    img.src = binding.value;
    img.onload = function() {
      el.src = img.src;
    }
  }
});

在模板中使用：

<div id="app">
  <img v-lazyload="http://example.com/image.jpg">
</div>

结语

自定义指令方便我们扩展Vue指令，实现特定的操作。在实际开发过程中，我们可以结合业务逻辑，编写出更多实用的自定义指令。