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 ...
随机推荐
- Notes 20180509 : Java基本数据类型
计算机就是个机器,这个机器由CPU.内存.硬盘和输入输出设备组成.计算机上运行着操作系统,操作系统提供对外的接口供各厂商和开发语言,开发运行在其上的驱动和应用程序. 操作系统将时间分成细小的时间碎片, ...
- [Oracle]Oracle良性SQL建议
(1)选择最有效率的表名顺序(只在基于规则的优化器中有效): Oracle的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table)将被最先处 ...
- IO流C++
1.iostream处理控制台IO #include<iostream> #include<string> using namespace std; istream& ...
- Mysql数据库-DAY2
查找 Select 字段(全部查找为*)from 表 增加 Insert into 字段(全部增加为表) values(需要增加的内容,用'','隔开') 删除 Delete from 表 where ...
- 谈谈对html5的了解
1.良好的移动性,以移动端设备为主. 2.响应式设计,以适应自动变化的屏幕尺寸. 3.支持离线缓存技术,webStorage本地缓存. 4.新增canvas,video,audio等新.标签元素.新增 ...
- JQuery传值,接收PrintWriter的int接收不了
<servlet>中的代码 <JSP中的代码> 很苦恼,我想要,<servlet>中传入的(0),在<jsp>中接收到这个参数,然后进行判断,从而达到判 ...
- 初次使用vue-cli3 来搭建项目
1,细数项目中使用的技术:vue, vue-router, vuex ,axios,vue-cli3, 快速建站. 2,mock技术使用的express-mockjs . 由于cli3 最新版的话缺少 ...
- 通过XShell实现windows文件上传到Linux服务器上
.XShell上传文件到Linux服务器上 在学习Linux过程中,我们常常需要将本地文件上传到Linux主机上,这里简单记录下使用Xsheel工具进行文件传输 1:首先连接上一台Linux主机 2: ...
- 树莓派3B+学习笔记:6、安装TeamViewer
TeamViewer是一个远程控制软件,它可以在任何防火墙和NAT代理的后台实现桌面共享和文件传输,界面简洁,操作简单,不需要专业知识就可轻松上手. TeamViewer电脑端下载网址www.team ...
- C语言/C++对编程学习的重要性!
C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...