vue事件修饰符

Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue.js通过由点 (.) 表示的指令后缀来调用修饰符. .stop.prevent.capture.self.once <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面

事件修饰符:stop  阻止冒泡 prevent  阻止默认事件 capture  添加事件侦听器时使用事件捕获模式 self  只当时间在该元素本身(比如不是子元素)触发时触发回调 once  事件只触发一次 --------------------------------------------------------- sopt: 如果没有没有设置阻止冒泡事件,子元素就会向父元素产生冒泡事件 添加stop后 prevent: 首先我们一个a标签添加跳转链接跳至百度 没添加prevent前

1.修饰符种类 .stop .prevent .capture .self .once .passive 2.self修饰符说明 <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> 使用修饰符时,顺序很重要:相应的代码会以同样的顺序产生.因此,用 v-on:click.prevent.

https://www.jianshu.com/p/b12d0d3ad4c1 .passive的作用与使用场景 https://juejin.im/post/5ad804c1f265da504547fe68 .passive的实现原理 原文地址:https://www.cnblogs.com/macliu/p/11733871.html

<div id="ON" v-on:click="handle0"> <p v-text="num"></p> @*v-on:click.stop="handle" 事件修饰符,在事件后面加.stop表示不再冒泡*@ <input id="Button1" v-on:click.stop="handle" type="button&qu

学习准备: ①.顾名思义,"事件修饰符"那么肯定是用来修饰事件,既然和事件有关系,那么肯定和"v-on"指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .prevent:阻止默认事件 .capture:事件捕获 .self:只当事件在该元素本身触发时触发回调 .once:事件只触发一次 1.阻止冒泡 页面代码: <div id="app" @click="clickDiv()">

//html <div id="app"> <div @click="divHandler" style="height:150px,background-color:darkcyan"> <input type="button" value="点击" @click="btnHandler"> </div> <a href="

事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()是非常常见的需求.尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. 为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符.通过由点(.)表示的指令后缀来调用修饰符. .stop .prevent .capture .self .once <!-- 阻止单击事件冒泡 -->

<div style="margin-top:100px"> <!--事件的监听--> <!--事件修饰符--> <div id="app"> <!--prevent 阻止默认事件的触发,这里地方会阻止跳转链接--> <a href="http://www.baidu.com" v-on:click.prevent>我是百度</a> <!--prevent