Vue常见的事件修饰符

Posted 小花皮猪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue常见的事件修饰符相关的知识,希望对你有一定的参考价值。

前言

vue一共给我们准备了6个事件修饰符,前三个比较常用,后三个少见,这里着重讲下前三个

1.prevent:阻止默认事件(常用)
2. stop:阻止事件冒泡(常用)
3. once:事件只触发一次(常用)
4.captrue:使用事件的捕捉模式(不常用)
5.self:只有event.target是当前操作的元素时才触发事件(不常用)
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕(不常用)

阻止默认事件(常用)

首先写一个简单的例子,一个简单的超链接标签,我们给一个百度链接和一个单击事件

查看页面,虽然点击文字出现了弹窗,但是随之跳到了超链接指向的地址

跳转到链接是a标签的默认行为,那么我们怎么阻止这个默认行为呢?

普通阻止默认行为方式

使用参数对象的preventDefault方法

这时候浏览器点击文字提示弹框后就不会跳转了

vue阻止默认行为方式

在vue中,不用我们亲自编写上面的方式,我们可以在事件名称后面跟一个.prevent就可以阻止默认行为了,效果都是一样的

 <!-- .prevent:阻止默认事件 -->
<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

阻止事件冒泡(常用)

编写代码,实现例子

我们发现,单击玩确定后会继续弹窗,这就是一个冒泡事件

阻止的方式和上一个例子类似,我这里以及下面都用vue特定的阻止行为了

我们在单击事件前面加上.stop

<!--   .stop:阻止事件冒泡 -->
<button @click.stop="showInfo">点我提示信息</button>

再次验证浏览器,解决问题

事件只触发一次(常用)

编写代码

如图,按钮点击多少次,就会弹窗多少次

我们加上once修饰符

<!--   3.once:事件只触发一次 -->
 <button @click.once="showInfo">点我提示信息</button>

使用事件的捕捉模式 (不常用)

   <!--  4.captrue:使用事件的捕捉模式 -->
      <div class="box1" @click.capture="showMsg(1)">
        div1 
        <div  class="box2" @click="showMsg(2)">
            div2
        </div>
      </div>

只有event.target是当前操作的元素时才触发事件(不常用)

 <!--     5.只有event.target是当前操作的元素时才触发事件 -->
      <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">点我提示信息</button>
    </div>

事件的默认行为立即执行,无需等待事件回调执行完毕不常用)

扩展:多个修饰符使用小技巧

比如现在有个需求,我们知道点击超链接后会弹窗然后跳转到指定的url,那么我们又想阻止冒泡,又想阻止默认行为,该怎么办呢?

我们可以多个修饰符一起使用,比如

// 多个事件修饰符一起使用,可以随意顺序
 <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a>

页面上只会弹窗就不跳转了

总结

个人感觉,了解常见的这些时间修饰符就够用了,不常见的了解即可。用到的时候再搜索相关资料

以上是关于Vue常见的事件修饰符的主要内容,如果未能解决你的问题,请参考以下文章

vue之修饰符

27.28. VUE学习之--事件修饰符之stop&capture&self&once实例详解

Vue.js 鼠标事件处理程序修饰符

Vue—事件修饰符

Vue—事件修饰符

Vue修饰符