Vue 中「自定义指令」的强大之处

最新推荐文章于 2024-06-16 13:00:26 发布

六小登登

最新推荐文章于 2024-06-16 13:00:26 发布

阅读量799

点赞数

分类专栏： Vue 我的Vue进阶之路

本文链接：https://blog.csdn.net/qq_32135281/article/details/88693894

版权

本文探讨了Vue中自定义指令的概念和应用，通过详细解释指令的生命周期钩子函数，如bind、inserted、update等，展示了如何创建并全局注册自定义指令。以一个加载指示器（Loading）为例，讲解了如何扩展指令功能，如传递参数以改变背景色和图标颜色，鼓励读者亲自实践以发掘自定义指令的潜力。

摘要由CSDN通过智能技术生成

Vue 中有许多的指令提供我们使用。它可以让你进行一些模版的操作。

但是内置指令，在实际的开发过程中可能这些并不能满足所有的需求。所以 Vue 给我们提供来一个灵活的方法「自定义指令」。

说自定义指令之前，先看看什么叫「指令」。

指令是指可以控制操作 DOM 的一些小命令，通常以 v-前缀出现的特殊特性。

例如我们经常使用的v-if、v-show、v-bind、v-on、v-html等。

使用指令时，你可以传递值，字符串，也可以给指令添加参数，修饰符等等。比如：

1.传递值

<p v-if="isShow">你好，我是六哥</p>
let vm = new Vue({
  el: "#app",
  data: {
    isShow: true
  }
});

2.字符串

<p v-text="'hello world'"></p>

3.添加参数

// class,style 就是传给指令的参数

<div v-bind:class="classObj"></div>
<div v-bind:style="classObj"></div>

4.修饰符

// prevent 指令的修饰符

<button v-on:submit.prevent="

关注

专栏目录