-
2021-07-26 14:46:44
Vue中的事件修饰符:
1.prevent:阻止默认事件(常用);
2.stop:阻止事件冒泡(常用);
3.once:事件只触发一次(常用);
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件;
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件修饰符</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> <style> *{ margin-top: 20px; } .demo1{ height: 50px; background-color: skyblue; } .box1{ padding: 5px; background-color: skyblue; } .box2{ padding: 5px; background-color: orange; } .list{ width: 200px; height: 200px; background-color: peru; overflow: auto; } li{ height: 100px; } </style> </head> <body> <!-- 准备好一个容器--> <div id="root"> <!-- 阻止默认事件(常用) --> <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息 不发生跳转行为</a> <!-- 阻止事件冒泡(常用) --> <div class="demo1" @click="showInfo"> <button @click.stop="showInfo">点我提示信息</button> <!-- 修饰符可以连续写 --> <!-- <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a> --> </div> <!-- 事件只触发一次(常用) --> <button @click.once="showInfo">点我提示信息</button> <!-- 使用事件的捕获模式 --> <div class="box1" @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div> <!-- 只有event.target是当前操作的元素时才触发事件; --> <div class="demo1" @click.self="showInfo"> <button @click="showInfo">点我提示信息</button> </div> <!-- 事件的默认行为立即执行,无需等待事件回调执行完毕; --> <ul @wheel.passive="demo" class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ }, methods:{ showInfo(e){ alert('同学你好!') // console.log(e.target) }, showMsg(msg){ console.log(msg) }, demo(){ for (let i = 0; i < 100000; i++) { console.log('#') } console.log('累坏了') } } }) </script> </html>
更多相关内容 -
vue事件修饰符和按键修饰符用法总结
2020-12-03 13:36:45之前关于vue事件修饰符和按键修饰符的一点分析,最近需要回顾,就顺便发到随笔上了 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现... -
vue 事件修饰符
2022-03-21 13:46:34在Vue中,修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理 vue中修饰符分为以下五种: 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v...在Vue中,修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理
vue中修饰符分为以下五种:
表单修饰符
事件修饰符
鼠标按键修饰符
键值修饰符
v-bind修饰符表单修饰符:
lazy
trim
numberlazy
在我们填完信息,光标离开标签的时候,才会将值赋予给value,也就是在change事件之后再进行信息同步<input type="text" v-model.lazy="value"> <p>{{value}}</p>
trim
自动过滤用户输入的首空格字符,而中间的空格不会过滤<input type="text" v-model.trim="value">
number
自动将用户的输入值转为数值类型,但如果这个值无法被parseFloat解析,则会返回原来的值<input v-model.number="age" type="number">
事件修饰符
事件修饰符是对事件捕获以及目标进行了处理,有如下修饰符:stop
prevent
self
once
capture
passive
nativestop
阻止了事件冒泡,相当于调用了event.stopPropagation方法<div @click="shout(2)"> <button @click.stop="shout(1)">ok</button> </div>
//点击shout只输出1,不会触发shout(2)
prevent
阻止了事件的默认行为,相当于调用了event.preventDefault方法<form v-on:submit.prevent="onSubmit"></form>
self
只当在 event.target 是当前元素自身时触发处理函数<div v-on:click.self="doThat">...</div>
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击
once
绑定了事件以后只能触发一次,第二次就不会触发<button @click.once="shout(1)">ok</button>
capture
使事件触发从包含这个元素的顶层开始往下触发<div @click.capture="shout(1)"> obj1 <div @click.capture="shout(2)"> obj2 <div @click="shout(3)"> obj3 <div @click="shout(4)"> obj4 </div> </div> </div> </div>
// 输出结构: 1 2 4 3
passive
在移动端,当我们在监听元素滚动事件的时候,会一直触发onscroll事件会让我们的网页变卡,因此我们使用这个修饰符的时候,相当于给onscroll事件整了一个.lazy修饰符<div v-on:scroll.passive="onScroll">...</div>
不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。
passive 会告诉浏览器你不想阻止事件的默认行为
native
让组件变成像html内置标签那样监听根元素的原生事件,否则组件上使用 v-on 只会监听自定义事件<my-component v-on:click.native="doSomething"></my-component>
使用.native修饰符来操作普通HTML标签是会令事件失效的
鼠标按钮修饰符
鼠标按钮修饰符针对的就是左键、右键、中键点击,有如下:
left 左键点击
right 右键点击
middle 中键点击
<button @click.left=“shout(1)”>ok
<button @click.right=“shout(1)”>ok
<button @click.middle=“shout(1)”>ok键盘修饰符
键盘修饰符是用来修饰键盘事件(onkeyup,onkeydown)的,有如下:
keyCode存在很多,但vue为我们提供了别名,分为以下两种:
普通键(enter、tab、delete、space、esc、up…)
系统修饰键(ctrl、alt、meta、shift…)
// 只有按键为keyCode的时候才触发<input type="text" @keyup.keyCode="shout()">
还可以通过以下方式自定义一些全局的键盘码别名
Vue.config.keyCodes.f2 = 113
v-bind修饰符
v-bind修饰符主要是为属性进行操作,用来分别有如下:
async
prop
camelasync
能对props进行一个双向绑定//父组件
<comp :myMessage.sync="bar"></comp>
//子组件
this.$emit('update:myMessage',params);
以上这种方法相当于以下的简写
//父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp> func(e){ this.bar = e; }
//子组件js
func2(){ this.$emit('update:myMessage',params); }
使用async需要注意以下两点:
使用sync的时候,子组件传递的事件名格式必须为update:value,其中value必须与子组件中props中声明的名称完全一致
注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用
将 v-bind.sync 用在一个字面量的对象上,例如 v-bind.sync=”{ title: doc.title }”,是无法正常工作的
props
设置自定义标签属性,避免暴露数据,防止污染HTML结构<input id="uid" title="title1" value="1" :index.prop="index">
camel
将命名变为驼峰命名法,如将 view-Box属性名转换为 viewBox<svg :viewBox="viewBox"></svg>
-
vue事件修饰符
2022-02-15 21:33:38给事件名称添加.stop事件修饰符后可以阻止事件冒泡,即仅会触发当前元素的事件,不会触发其父元素的相同事件 prevent 阻止默认事件 <!-- 阻止默认事件 --> <a href=...- stop
阻止事件冒泡
给事件名称添加.stop事件修饰符后可以阻止事件冒泡,即仅会触发当前元素的事件,不会触发其父元素的相同事件
- prevent
阻止默认事件
<!-- 阻止默认事件 --> <a href="https://www.baidu.com" @click.prevent="aClick()">跳转到百度</a>
- capture
添加事件时使用捕获模式,即由外到内进行事件触发
应用场景较少 - self
当事件在该元素本身触发使才触发回掉 - once
只触发一次回调
- stop
-
vue 事件修饰符 & 按键修饰符
2021-12-02 13:46:14事件修饰符 在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。 .stop 阻止单击事件传播 即阻止了事件冒泡,相当于调用了event.stopPropagation方法(通俗讲就是阻止事件...事件修饰符
在事件处理程序中调用
event.preventDefault()
或event.stopPropagation()
是非常常见的需求。.stop
阻止单击事件传播 即阻止了事件冒泡,相当于调用了event.stopPropagation方法(通俗讲就是阻止事件向上级DOM元素传递)
<div @click="show(1)"> <div @click="show(2)">测试</div> </div>
点击“测试”输出
<div @click="show(1)"> <div @click.stop="show(2)">测试</div> </div>
点击“测试”输出
.prevent
阻止了事件默认行为,相当于调用了event.preventDefault方法
默认事件指对DOM的操作会引起自动执行的动作,比如点击超链接的时候会进行页面的跳转,点击表单提交按钮时会重新加载页面等,使用".prevent"修饰符可以阻止这些事件的发生。
<!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a>
.capture
捕获冒泡,即有冒泡发生时,有该修饰符的dom元素会先执行,如果有多个,从外到内依次执行,然后再按自然顺序执行触发的事件。(让事件触发从包含这个元素的顶层开发往下依次触发)
<!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div>
.once
2.1.4新增
设置事件只能触发一次,比如按钮的点击等。
<!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a>
.self
注意:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用
v-on:click.prevent.self
会阻止所有的点击,而v-on:click.self.prevent
只会阻止对元素自身的点击。<!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div @click.self="doThat">...</div>
.passive
2.3.0新增
该修饰符大概意思用于对DOM的默认事件进行性能优化,根据官网的例子比如超出最大范围的滚动条滚动的。
以移动端监听元素滚动事件说明,在监听元素滚动事件的时候,会一直触发onscroll事件让页面变的越来越卡,因此在我们使用这个修饰符后,相当于给onscroll事件增加了.lazy修饰符
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div>
不要把
.passive
和.prevent
一起使用,因为.prevent
将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive
会告诉浏览器你不想阻止事件的默认行为。
.native
在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加'. native'事件是无法触 发的。
让组件变成像html内置标签那样监听根元素的原生事件,否则组件上使用v-on只会监听自定义事件
按键修饰符
在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为
v-on
在监听键盘事件时添加按键修饰符键盘修饰符用来修饰键盘的事件(如:onkeyup、onkeydown等),键盘的事件触发需要相对应的keyCode。然而keyCode存在很多,因此为了使用方便Vue给我们提供了别名的修饰符,分为以下两种:
普通按键(enter、delete、space、tab、esc…)
系统修饰键(ctrl、shift、alt…)
也可以直接用按键的代码来做修饰符(如:enter为13)
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <!-- 键修饰符,键别名 --> <input @keyup.enter="submit"> <!-- 键修饰符,键代码 --> <input @keyup.13="onEnter">
为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:
.enter
.tab
.delete
(捕获“删除”和“退格”键).esc
.space
.up
.down
.left
.right
同样vue监听按键事件也可以添加其他的按键:只要加上相应的按键的名称就行了
例如:@keyup.tab="";@keyup.delet = "";
里面写按键触发执行的事件就可以了。
-
详解Vue 事件修饰符capture 的使用
2020-11-27 17:47:23.capture事件修饰符的作用添加事件侦听器时使用事件捕获模式 即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。 就是谁有该事件修饰符,就先触发谁。 ... -
vue事件修饰符,六次实操带你快速了解与应用~
2021-08-07 09:21:59今天总结了vue常见的事件修饰符,学习面试都是常遇到的,快来看看吧~???? 先引用vue官网的话说----在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在... -
vue事件修饰符.native
2021-08-11 19:45:41在写代码时我注意到click事件的native修饰符,如下: <el-dropdown-item divided @click.native="logout"> <span style="display:block;">退出登录</span> </el-dropdown-item> 请问... -
Vue事件修饰符和按键修饰符用法总结
2021-10-20 17:30:40今天给大家介绍Vue的事件修饰符、按键修饰符 、 鼠标修饰符! 事件修饰符 stop 阻止事件继续传播 <div @click.stop="handleClick">hello word</div> prevent 阻止标签默认行为 <div @click.... -
vue事件修饰符(stop,prevent,self,once)
2021-10-28 10:28:39Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。 .stop :阻止事件冒泡 .prevent :阻止默认事件发生,比如超链接的默认跳转、表单的提交(重点) .self :只有元素自身触发事件才执行。... -
Vue事件修饰符native、self示例详解
2020-10-16 17:36:27主要给大家介绍了关于Vue事件修饰符native、self的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 -
Vue事件修饰符.prevent .passive
2021-07-31 21:06:58Vue事件修饰符.prevent .passive Vue提供了事件绑定的语法糖,我们在标签中可直接使用,如v-on:click,@click,@focus的形式绑定事件监听器,并且可以使用修饰符对事件进行设置。 prevent 是拦截默认事件,passive是... -
vue事件修饰符详解
2018-06-22 11:11:30vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个:(1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的结果: 点击外层div... -
Vue基础:Vue事件修饰符的使用
2020-08-09 16:19:11Vue事件修饰符的使用 -
vue事件修饰符(stop 阻止冒泡)
2019-08-02 17:39:46上面操作是点击了按钮,我们看到不仅按钮的点击事件被触发,它的父级容器也被触发了 开发时难免会遇见这种情况 好比列表页 有时list会有一些按钮操作,那么这时我们就可以使用.stop来阻止这个冒泡了 ... -
Vue事件修饰符(.stop .once .prevent)
2022-03-02 21:55:07.stop 阻止冒泡 <div id="app"> <!-- 事件后加 .stop 阻止冒泡 --> <div @click="show('父')">父盒子 <div @click.stop="show('子')">子盒子<... var vm = new Vue -
vue事件修饰符的使用
2022-01-19 11:36:05在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有: <div id="app"> ... -
Vue 事件修饰符 详解
2017-12-14 13:44:01本人后端程序员,由于绑页面需要使用vue,在自学的过程中不懂事件修饰符,特此请教后才理解,在这提出我的分享,忘各位大神指正. vue官网上指出: 在事件处理程序中调用 event.preventDefault() 或 event.... -
vue事件修饰符native 的作用
2019-07-29 16:27:47转载: https://blog.csdn.net/qq_29468573/article/details/80771625 通俗点讲:就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加’. native’事件是无法触 发的。 ... -
vue 事件修饰符 .passive 最通俗的理解
2020-04-23 15:44:16vue中的事件修饰符中有一个十分特别的修饰符,vue官方文档是这样介绍的: .passive 会告诉浏览器你不想阻止事件的默认行为。 不阻止默认行为,普通思维很难理解,不阻止,那么我不preventDefault不就行了吗?显然,... -
前端开发之Vue事件修饰符和按键修饰符
2022-01-17 11:32:13在前端开发Vue.js中,关于事件和按键的使用也是比较常见的操作之一,那么与它们相关的事件修饰符和按键修饰符也是延伸前端培训的比较常用的操作。那么本篇博文就来分享一下关于Vue.js中事件修饰符和按键修饰符的使用... -
vue 事件修饰符 stop、stop.self、self.stop
2021-08-07 17:39:02@click.stop 阻止事件流继续传播,自身的点击事件仍然执行。 @click.stop.self 自身的点击阻止,也阻止了事件流继续传播。 @click.self.stop 只阻止自身的点击事件,事件流继续传播。