Vue中事件修饰符与键盘事件
目录
事件修饰符
prevent:阻止默认事件
stop:阻止事件冒泡
once:事件只触发一次
capture:使用事件的捕获模式
self:与当前事件一致时触发
passive:事件的默认行为立即执行
键盘事件
事件修饰符
Vue中的事件修饰符:
1、prevent:阻止默认事件;
2、stop:阻止事件冒泡;
3、once:事件只触发一次;
4、capture:使用事件的捕获模式;
5、self:只有event.target是当前操作的元素时才触发事件;(只有和当前事件触发的标签一致时才会触发)
6、passive:事件的默认行为立即执行,无需等待事件回调执行完毕
prevent:阻止默认事件
点完之后不会发生默认事件
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script><div id="root">
<!-- .prevent阻止默认行为--><a :href="url" @click.prevent="show">点击去百度</a>
</div><script type="text/javascript">const vm = new Vue({el: '#root',data: {url:"http://baidu.com"}}
</script>
点完超链接不会发生跳转,因为prevent阻止了a标签的默认事件(跳转)
stop:阻止事件冒泡
div和button都有show事件,当点击按钮时,button会触发show,执行完成后,冒泡到外层,div的show也会触发
<!-- .stop阻止事件冒泡--><div @click="show"><button @click.stop="show">小按钮</button></div><script type="text/javascript">const vm = new Vue({el: '#root',methods:{show(e){console.log(e.target)alert("hello")}}
<script>
加上了stop,阻止了button的冒泡,所以div不会触发show事件。
once:事件只触发一次
<div id="root"><!-- .once只执行一次--><button @click.once="show">一次按钮</button>
<div><script type="text/javascript">const vm = new Vue({el: '#root',data: {url:"http://baidu.com"},methods:{show(e){console.log(e.target)alert("hello")}}
</script>
默认是点一次触发一次事件,但是加上了once后只会触发一次,(页面加载完后点击n次只触发第一次)
capture:使用事件的捕获模式
<head><meta charset="UTF-8"><!--vue--><script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script><style>*{margin-top: 5px;}.div1{padding: 5px;background-color: deepskyblue;}.div2{padding: 5px;background-color: orange;}</style></head><div id="root"><!-- .capture 使用捕获模式,捕获是从外向内,冒泡是从内向外--><div class="div1" @click.capture="div1">div1<div class="div2" @click="div2">div2</div ></div><script type="text/javascript">const vm = new Vue({el: '#root',methods:{div1(){console.log(1)},div2(){console.log(2)}
</script>
正常情况下是先进行事件的捕获,这个过程是有外到内的,捕获完成后,该事件触发,在冒泡到外层。
没加capture时,点击div2,会打印出2 1,这个是冒泡产生的结果
加上capture后
self:与当前事件一致时触发
.self event.target是当前的对象时才会触发 只有和他一样的标签时才会触发
冒泡冒上去的还是button对象,而不会变成div
<div id="root"> <!-- .self event.target是当前的对象时才会触发 只有和他一样的标签时才会触发--><!-- 冒泡冒上去的还是button对象,而不会变成div--><div @click.self="show"><button @click="show">self按钮</button></div>
</div>
上面的加上.self,show事件只会触发一次,层的div不会被触发。
passive:事件的默认行为立即执行
passive立即执行,不会等到回调函数执行完毕才执行,默认情况是回调函数执行完后才会执行事件的行为。
<style>ul{background-color: gold;height: 200px;width: 200px;/*位置不够时,自动滚动*/overflow: auto;}li{height: 100px;width:100px;}</style><div id="root">
<!--scroll只要发生了滑动就会执行,滚条鼠标和上下键 当到达底部继续滑动不会继续执行-->
<!-- wheel属性 只有当鼠标滑动才会执行 当到达底部继续滑动鼠标还会继续执行-->
<!-- .passive无须等待回调函数执行完毕,立即执行这个属性,这里为滑动,则立即滑动--><ul @wheel.passive="flow"><li>1</li><li>2</li><li>3</li></ul>
</div><script type="text/javascript">const vm = new Vue({el: '#root',data: {url:"http://baidu.com"},methods:{flow(){for( i=0;i<10000;i++) {console.log("滑动..")}}}});
scroll只要发生了滑动就会执行,滚条鼠标和上下键 当到达底部继续滑动不会继续执行
wheel属性 只有当鼠标滑动才会执行 当到达底部继续滑动鼠标还会继续执行
.passive无须等待回调函数执行完毕,立即执行这个属性,这里为滑动,则立即滑动单独的scroll也有passive效果
键盘事件
1、Vue中常见的按键别名:
- 回车--enter
- 删除--delete(捕获删除和退格键)
- 退出---esc
- 空格--space
- 换行--tab
- 上--up
- 下--down
- 左--left
- 右--right
2、Vue未提供的别名按键,可以使用按键原始的值去绑定,但注意要为kebab-case(短线命名,如大小写切换的按键CapsLock,要绑定就为caps-lock)
3、系统修饰键(用法特殊):ctrl、alt、shift、meta(win键)
- 配合keyup使用时:按下这个修饰键的同时,在按下其他键,随后释放其他键,事件才别触发
- 配合keydown使用时:按下即生效,正常触发事件
4、也可以使用keyCode指定具体的按键(如:@keydown.13="xxx"),但是不推荐,因为有些键盘的keyCode值不一值
5、Vue.config.keyCodes.自定义键名=键码
<div id="root">
<input type="text" placeholder="输入并回车" @keydown.kc="kdown" >
</div><script type="text/javascript">Vue.config.keyCodes.kc=13//给回车定义了一个别名kc
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>键盘事件</title><!--vue--><script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script></head><div id="root">
<input type="text" placeholder="输入并回车" @keydown.enter="kdown" @keydown="keydown">
</div><script type="text/javascript">const vm = new Vue({el: '#root',data: {},methods:{kdown(e){console.log(e.target.value)},keydown(e){//打印键的名和键的值console.log(e.key,e.keyCode)}}});console.log(vm)</script>
</html>
事件总结
可以在一个绑定事件中设置多个属性,如: <button @click.stop.prevent="show">小按钮</button>
Vue中事件修饰符与键盘事件相关推荐
- Vue事件处理(事件修饰符,键盘事件)
Vue中的事件修饰符:1.prevent:阻止默认事件(常用)2.stop: 阻止事件冒泡(常用)3.once: 事件只触发一次(常用)4.capture: 使用事件的捕获模式5.self:只有eve ...
- vue 指令 v-on 事件修饰符-自定义键盘事件
<body><div id="app">用户名:<input type="text" v-on:keyup.f1='clearCo ...
- 快速了解4种阻止事件冒泡的方法(原生js阻止,vue中使用修饰符阻止)
阻止事件冒泡的方法 前端结构 <div id="app"><div class="father-box" @click="click ...
- 128-Vue中的事件修饰符-阻止冒泡事件
128-Vue中的事件修饰符 .stop 阻止事件冒泡(*) .prevent 阻止默认事件(*) .prevent.stop 阻止默认事件的同时阻止冒泡 .once 阻止事件重复触发(once与st ...
- vue中 .sync 修饰符 个人理解
vue中.sync修饰符有什么用 .sync 修饰符 其实就是一个语法糖 vue中 :子组件不能修改props 外部数据 vue中: $emit 可以触发事件并传参 vue中: $event可以获取 ...
- 详细解析vue中的修饰符
1.表单输入框input中的修饰符 .lazy:加lazy修饰符的区别相当于在输入后失去焦点或者摁了enter键视图才更新.不加lazy则是在keyup就更新,如下: <input v-mode ...
- 事件处理-注册时间 // 事件处理-修饰符 // 事件处理-键盘事件的修饰符 // 事件处理-系统修饰符 // 事件处理-鼠标修饰符
事件处理-注册事件 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
- vue中.sync修饰符与自定义组件的v-model的使用
.sync修饰符 有时我们需要父组件向子组件传值,并且子组件要修改父组件中的值是,我们一般会这样写 //父组件 <template>//子组件修改值 父组件注册自定义事件 传过来的参数通过 ...
- 关于vue中sync修饰符的用法
.sync是在vue2.3.1+版本开始使用,在有些情况下,我们可能需要对一个 prop 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且 ...
最新文章
- 如何把js变量传递给html页面,如何将js变量从一个html文件传递给另一个?
- python中的大数据品牌运营专业公司_国内最好的专业数据分析公司有哪些?
- 利用python生成一个导出数据库的bat脚本文件
- mocha chai mysql_Github MIT开源银行电子支付系统(ReactJS+Nodejs+Mysql)
- 面对海量请求,缓存设计还应该考虑哪些问题?(转)
- rust石头墙几个c4_从安顺自驾石头寨一日游
- Angular 4.x Template-Driven Forms
- 《大数据之路:阿里巴巴大数据实践》-第1章 总述
- 微信好友检测助手App
- vyos配置dns迭代查询
- PCB板设计流程总结
- 计算机单位大小知识,计算机存储设备及存储容量单位Byte,KB,MB,GB,TB的介绍
- INFOR ERP LN 创建表
- ubuntu mysql mysqldb_告诉你在Ubuntu上安装MySQLdb的方法及命令
- CAD出图、标书装订、晒图、工程复印、彩色打印/复印
- 丈夫三次“买凶杀妻” 妻子毫无所觉称婚姻甜蜜
- Exoplayer简介
- 工作处境不好的时候,学会三思(三种思考)
- element el-transfer穿梭框的使用,自定义穿梭框的数据项
- Scrum板与Kanban如何抉择?敏捷工具:opdea板与按照guarbpgz
热门文章
- stata语言是用C语言开发,在Stata中编写估计命令:编写C语言插件
- 苹果亮度自动调节怎么关闭_卢伟冰:Redmi K30 Pro解决安卓手机自动亮度调节痛点...
- 桌面图标名的背景色变成了蓝色——解决方法
- Java毕业设计_旅行社业务及客户服务系统设计与实现
- web离线地图开发(开发工具+接口文档+示例代码)
- wps怎么将图片嵌入文字里_在WPS文字中如何给图片添加题注(图注)
- PE中添加外置程序(转载)
- 宝塔安装hyperf
- 前端 DSL 实践指南(上)—— 内部 DSL
- python实现tail -f功能