v-on 事件修饰符
事件修饰符:
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件侦听器时使用事件捕获模式
- .self 只当该事件在该元素本身时(不是子元素)触发时才回调
- .once 事件只触发一次
一、.stop 修饰符,阻止时间冒泡:
1、未加.stop事件修饰符:
CSS部分:
<style>
.inner {
background-color: green;
height:100px;
padding:20px;
} .outer {
padding: 10px;
background-color: yellow;
}
</style>
HTML部分:
<div id="app">
<div class="outer" @click="outerDivHandler">
<div class="inner" @click="innerDivHandler">
<button @click="btnHandler">点我</button>
</div>
</div>
</div>
JS部分:
var app = new Vue({
el: "#app",
data() {
},
methods: {
btnHandler() {
console.log("btnHandler事件触发了");
},
innerDivHandler() {
console.log("innerDivHandler事件触发了");
},
outerDivHandler() {
console.log("outerDivHandler事件触发了");
},
},
});
点击按钮时,输出结果,点击按钮时分别触发了父级的点击事件。
2、添加.top属性修饰符后
<div id="app">
<div class="outer" @click="outerDivHandler">
<!-- outerDiv -->
<div class="inner" @click="innerDivHandler">
<!-- button的点击事件添加了属性修饰符【.top】 -->
<button @click.stop="btnHandler">点我</button>
</div>
</div>
</div>
再点击button,结果,只触发了button上的事件,父级元素绑定的点击事件并没有触发。
二、.prevent修饰符,阻止默认事件
阻止元素的默认事件发生。
<a href="http://www.baidu.com" @click="aHandler">百度一下</a>
在浏览器上点击 百度一下 会自动跳转到百度页面,当然aHandler事件也会触发,那么怎么阻止a跳转到百度页面呢?在@click后面加上.prevent属性修饰符即可
<a href="http://www.baidu.com" @click.prevent="aHandler">百度一下</a>
再点击 百度一下 发现只执行了aHandler事件,并未跳转。
三、.capture 添加事件侦听器时使用事件捕获模式
1、未添加.capture修饰符:
<div class="inner" @click="innerDivHandler">
<button @click="btnHandler">点我</button>
</div>
结果:
2、添加了.capture后
<div class="inner" @click.capture="innerDivHandler">
<button @click="btnHandler">点我</button>
</div>
结果:
四、.self 修饰符,只有事件发生在自己身上时才触发
<div class="inner" @click.self="innerDivHandler">
<button @click="aHandler">点我</button>
</div>
点击按钮,只触发了aHandler事件。
点击绿色区域,只触发了div绑定的事件。
注意:.self只会阻止自己身上的冒泡事件发生,如果上述div还有兄弟元素也绑定了事件,未加.self修饰符,按钮也未加.stop修饰符,那么点击按钮,依然会触发其兄弟元素的事件。
五、.once 事件只触发一次,第二次点击就没得效果了。
<button @click.once="btnHandler">点我</button>
v-on 事件修饰符的更多相关文章
- Vue学习笔记五:事件修饰符
目录 什么是事件修饰符 没有事件修饰符的问题 HTML 运行 使用事件修饰符 .stop阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事 ...
- 从零开始学 Web 之 Vue.js(一)Vue.js概述,基本结构,指令,事件修饰符,样式
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- VueJS 事件修饰符
事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()是非常常见的需求.尽管我们可以在 methods 中轻松实现这点,但更 ...
- Vue.js-03:第三章 - 事件修饰符的使用
一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...
- vue_事件绑定 v-on _事件修饰符
事件绑定 v-on 传参的同时,接收事件对象 <button @click="test('111', $evnt)">哈哈</button> 事件修饰符 阻 ...
- [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)
preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...
- Vue2.0学习笔记:Vue事件修饰符的使用
事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
- 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- JNI由浅入深_5_基本类型应用
1.基本类型应用 对于JNI处理基本类型还是比较简单的,下面是Java代码: <span style="font-size:14px;"> public native ...
- 深入理解计算机系统——系统级I/O
一.UNIX I/O 在UNIX系统中有一个说法,一切皆文件.所有的I/O设备,如网络.磁盘都被模型化为文件,而所有的输入和输出都被当做对相应文件的读和写来执行.这种将设备映射为文件的方式,允 ...
- Nested Loops,Hash Join 和 Sort Merge Join. 三种不同连接的不同:
原文:https://blog.csdn.net/tianlesoftware/article/details/5826546 Nested Loops,Hash Join 和 Sort Merge ...
- java核心技术-多线程之引导概念
前两篇文章分别讲了,Java线程相关基础概念以及线程的内存模型,本节作为后续章节的引导,个人认为对于学习后面的只是还是比较重要.好了,既然说了多线程,那么首先要弄清以下几个问题: 1. 什么是多线程? ...
- jquery实现漂亮的轮播图
今天工作中要用到一个轮播功能,在网上找了一些,觉得有些过于繁琐,于是自己动手写了一个,效果如图: 代码如下: <!DOCTYPE html> <html lang="en& ...
- 将Vue插件发布到npm的完整记录
前言 面对越来越多的组件库,越开越多的ui库,学会发布库已经是前端必须会的事情了,也算是为开源贡献一份力量,在网络上看了一些前者的文章,也算的发布成功了,虽然还存在很多问题,路不积跬步,无以至千里 ...
- laravel5.5源码笔记(二、服务提供者provider)
laravel里所谓的provider服务提供者,其实是对某一类功能进行整合,与做一些使用前的初始化引导工作.laravel里的服务提供者也分为,系统核心服务提供者.与一般系统服务提供者.例如上一篇博 ...
- python学习笔记(二)python基础知识(list,tuple,dict,set)
1. list\tuple\dict\set d={} l=[] t=() s=set() print(type(l)) print(type(d)) print(type(t)) print(typ ...
- docker环境下构建flannel 网络
flannel 是coreos 开发的网络解决方案,为每一台主机分配一个 subnet,容器从此subnet 中分配ip,ip可以在主机间路由.每个subnet从更大的ip池中划分,为了在各个主机间共 ...
- hello,Python
Python无疑是近年来程序语言届最闪亮的明星.2018年Python被TIOBE授予年度编程语言称号,在一月的排行榜中也雄踞第三位,打破了Java C C++长期以来所保持的三强局面 对比笔者以前学 ...