【Vue】五个最常用的事件修饰符
事件修饰符概览
修饰符 | 说明 |
---|---|
.stop | 阻止冒泡 |
.prevent | 阻止默认事件 |
.capture | 添加事件侦听器时使用事件捕获模式 |
.once | 事件只触发一次 |
.self | 只有点击当前元素本身时才会触发回调 |
.stop
.stop用来防止冒泡,我们先来看看冒泡的场景。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body> <div id="app"><div @click="divHandler"><button @click="btnHandler">点击</button></div></div><script>var vm = new Vue({el:"#app",data: {},methods: {divHandler() {console.log('触发了div')},btnHandler() {console.log('触发了button')}}})</script>
</body>
</html>
点击按钮时,可以看到不光按钮的点击事件触发了,而且父容器div的点击事件也触发了,这时我们就可以使用 .stop 修饰符来阻止这个冒泡。
<div @click="divHandler"><button @click.stop="btnHandler">点击</button>
</div>
.prevent
.prevent 用来阻止默认行为,我们可以通过a标签来演示,先来看看未阻止的情况。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body> <div id="app"><a href="http://www.baidu.com" @click='linkclick'>百度一下</a></div><script>var vm = new Vue({el:"#app",data: {},methods: {linkclick(){console.log('阻止默认行为')}}})</script>
</body>
</html>
点击“百度一下”,我们可以看到先触发了点击事件,然后页面跳转了,这时我们可以通过 .prevent 修饰符来阻止a标签默认的跳转事件。
<a href="http://www.baidu.com" @click.prevent='linkclick'>百度一下</a>
.capture
.capture 实现捕获触发事件的机制。即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。(若有多个该修饰符,则由外而内触发)
以上面的冒泡场景为例,点击按钮时先触发的是按钮的点击事件,然后触发的div的点击事件,现在我们给div的点击事件绑定 .capture 修饰器,可以看到先触发的是div事件。
<div @click.capture="divHandler"><button @click="btnHandler">点击</button>
</div>
.once
.once 表示只触发一次事件处理函数。先来看看没有.once的情况。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body> <div id="app"><button @click="btnHandler">点击</button></div><script>var vm = new Vue({el:"#app",data: {},methods: {btnHandler() {console.log('触发了button')}}})</script>
</body>
</html>
可以看到每次点击按钮时都会触发一次事件处理函数,现在我们给按钮的点击事件添加 .once 修饰符,可以看到事件处理函数只触发了一次。
<button @click.once="btnHandler">点击</button>
.self
.self 实现只有点击当前元素时候,才会触发事件处理函数。
以上面的冒泡场景为例,点击按钮时,按钮和div的点击事件都会被触发。现在我们给div的点击事件绑定 .self 修饰器,(为了便于观察给div加上背景颜色)。可以看到点击按钮时只触发了按钮的点击事件,只有点击div元素时才会触发div的点击事件。
<div @click.self="divHandler" style="background: red;"><button @click="btnHandler">点击</button>
</div>
【Vue】五个最常用的事件修饰符相关推荐
- Vue.js 学习笔记 五 常用的事件修饰符
介绍几个常用的事件修饰符 直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
- vue中常用的事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹 ...
- 五、伊森商城 前端基础-Vue v-on 事件修饰符 按键修饰符 v-for v-if 和v-show v-else和v-else-if p24
目录 1.v-on 2.事件修饰符 3.按键修饰符 3.1.组合按钮 4.v-for 5.v-if和v-show 6.v-else 和 v-else-if 6.1.v-if结合v-for来时用 1.v ...
- vue判断是否双击_vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作...
Vue 事件处理方法 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. v-on:click 单击事件 + + - - v-on:dblclick 双击事件 ...
- vue事件修饰符详解
vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...
- Vue中的事件修饰符
事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...
- Vue数据代理+事件处理+事件修饰符的作用+计算属性的使用,尚硅谷Vue系列教程学习笔记(2)
尚硅谷Vue系列教程学习笔记(2) 参考课程:<尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通> 参考链接:https://www.bilibili.com/video/ ...
- vue 事件修饰符与按键修饰符
事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...
- Vue 事件修饰符 详解
本人后端程序员,由于绑页面需要使用vue,在自学的过程中不懂事件修饰符,特此请教后才理解,在这提出我的分享,忘各位大神指正. vue官网上指出: 在事件处理程序中调用 event.preventDef ...
最新文章
- pythonos模块使用方法_Python OS模块常用方法总结
- 小余学调度:学习记录(2022年1月)
- ensp静态路由的配置及分析
- HTML5新增的主体结构元素
- JAVA经典题--死锁案例
- 将serversocket 写在按钮事件中连接不上_看 Netty 在 Dubbo 中如何应用
- IDEA官网以往版本下载
- 在西安参加Java培训该怎么学习?
- linux bridge 抓包,Linux bridge hairpin mode
- 红米note3 S线刷MUI版本,解决手机卡顿
- Spring中的IOC和AOP是什么意思?
- 蓝桥杯——种植园问题(prev54)
- html网页的主题标签是什么6,HTML标签以及各个标签属性大全(网页制作必备)
- linux查看raw格式磁盘,KVM之raw和qcow2格式虚拟磁盘创建
- 设计模式普及之抽象工厂模式
- 启动AutoCAD Electrical提示“缺少缺少驱动程序AceRedist”的解决办法
- arcade 读取地图信息时:错误: ‘gbk‘ codec can‘t decode byte 0x91 in position 314: illegal multibyte sequence
- 尚硅谷Shell学习笔记
- extundelete 恢复误删文件
- certbot 常用的命令
热门文章
- python函数实例化_Python中的__new__()方法与实例化
- IO流基本知识总结【字节输入输出流、字符输入输出流、转换流、对象流】
- 条件渲染-v-if // v-else // v-else if // v-show
- 笔记:安卓App消息处理机制
- 【转】nginx+iis实现负载均衡
- 【转】使用手势对UIImageView进行缩放、旋转和移动
- Slackware Linux 14.0 RC5 发布
- 实现了发动机功能,支持Slider Motor、Hinge Motor、Hinge2 Motor。
- Flutter进度条Flutter圆形进度条Flutter条形进度条Flutter Progress进度条LinearProgressIndicator
- Hibernate 主清单文件配制说明