Vue2.0中的事件修饰符
Vue2.0中的事件修饰符:
1.prevent:阻止默认事件,原生js里面为event.preventDefault()
2.stop:阻止事件冒泡
3.once:事件只触发一次
4.capture:使用事件的捕获模式:事件分为捕获阶段和冒泡阶段,事件捕获阶段事件执行顺序是有外向内,就是父向子,冒泡阶段事件执行时由内向外,子向父
5.self:只有event.target是当前操作元素是才触发事件
6.passsive:事件的默认行为立即执行,无需等待事件回调执行完毕
7.native:把Vue的事件当做原生事件使用,用修饰符native
<div id='root'><!--1.prevent阻止a标签在点击时跳转页面--><a href="https://www.jianshu.com/" @click.prevent="showInfo($event)">点击信息</a><!--2.stop阻止事件冒泡--><div class="demo" @click="showInfo"><button @click.stop="showInfo">阻止事件冒泡</button></div><!--补充:如果既要阻止冒泡又要阻止默认事件连续写--><div class="demo" @click="showInfo"><a href="https://www.jianshu.com/" @click.stop.prevent="showInfo">点击信息</a></div><!--3.事件只触发一次--><button @click.once="showInfo">我只触发一次</button><!--4.事件铺获capture--><!--在不加capture时点击showInfo1(2)会打印出的顺序为2,1 正常的冒泡阶段执行--><!--加capture时点击事件会在捕获阶段触发则,打印出来的为1,2--><div class="one" @click.capture="showInfo1(1)"><div class="two" @click="showInfo1(2)"></div></div><!--5.self :event.target当前点击的元素:也可以用来阻止冒泡--><div class="demo" @click.self="showInfo"><button @click="showInfo">event.target当前点击的元素</button></div><!--5.passsive --><!--@scroll滚动条的滚动--><!--@wheel鼠标滚轮滚动 @wheel.passsive可以不用等1万个字打印完在执行滚动条--><uL class="list" @wheel.passsive="scroll"><li>1</li><li>3</li><li>3</li><li>3</li></uL></div>
<script>const vm = new Vue({el: '#root',data: {},methods: {showInfo() {alert("ah")},showInfo1(a) {console.log(a)},scroll() {//在触发滚轮事件时,控制台打印完这个1万数字完成后,才滚动滚动条,//中间有一个时间段,用了passsive无需等待滚动条先滚动在执行那1万个字for (let index = 0; index < 10000; index++) {console.log(index)}},}})</script>
Vue2.0中的事件修饰符相关推荐
- 128-Vue中的事件修饰符-阻止冒泡事件
128-Vue中的事件修饰符 .stop 阻止事件冒泡(*) .prevent 阻止默认事件(*) .prevent.stop 阻止默认事件的同时阻止冒泡 .once 阻止事件重复触发(once与st ...
- Vue中的事件修饰符
事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...
- vue中各类事件修饰符
1.stop:阻止事件冒泡,顺序是执行顺序是div>body>document,js默认开启事件冒泡.e.stopPropagation().e.stopImmediatePropagat ...
- 前端学习(2922):vue中的事件修饰符
- Vue2.0学习笔记:Vue事件修饰符的使用
事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
- vue学习:事件传递(冒泡和捕获),事件委托,jquery中的事件委托,$event 获取元素,vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技 术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
- Vue中事件修饰符与键盘事件
目录 事件修饰符 prevent:阻止默认事件 stop:阻止事件冒泡 once:事件只触发一次 capture:使用事件的捕获模式 self:与当前事件一致时触发 passive:事件的默认行为立即 ...
- Vue数据代理+事件处理+事件修饰符的作用+计算属性的使用,尚硅谷Vue系列教程学习笔记(2)
尚硅谷Vue系列教程学习笔记(2) 参考课程:<尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通> 参考链接:https://www.bilibili.com/video/ ...
- vue事件修饰符示例以及介绍
1vue中的事件修饰符 1.prevent 阻止默认事件 示例: 不加时,点击a标签后先执行方法,方法执行结束跳转链接 <a href="www.baidu.com" @cl ...
最新文章
- 从Webshell到肉鸡
- (转)一个vue路由参数传递的注意点
- 配置bond和vlan
- 关于宿主机没有Vmware虚拟网卡的问题分析与解决
- qt QMessageBox 中文乱码的问题
- 判断是否为长按_如何判断电路中的IC是在工作?
- 【Spring】Spring事务失效的 8 大原因
- Jmeter(七)Jmeter脚本优化(数据与脚本分离)
- JS内存泄漏实例解析
- 22. Element lang 属性
- QQ模拟自动登录实现
- Go语言核心之美 4.1-函数声明
- 计算机无法启动鼠标键盘没反应,电脑开机后鼠标键盘没反应怎么办
- c语言错误c1083是什么意思,fatal error C1083: Cannot open include file: 'stdafx.h': No such file or directo...
- 技术人员的一点产品思维思考
- Linux:CPU频率调节模式以及降频方法简介
- SCSI子系统基础学习笔记 (之UFS子系统) - 3. UFS命令处理
- 微信小程序点赞成功,取消点赞、评论。
- 记唐晓芙---围城第一遍略读后记
- CUDA C/C++ 流和并发