27.28. VUE学习之--事件修饰符之stop&capture&self&once实例详解

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">  <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="hdcms">  <div @click="box" :style="{border:'solid 2px red'}">  <a href="https://www.cnblogs.com/haima" @click.prevent="links">从里向外冒泡响应事件</a> </div> <br>  <div @click="box" :style="{border:'solid 2px red'}">  <a href="https://www.cnblogs.com/haima" @click.stop.prevent="links">阻止从里向外冒泡响应事件,阻止点击a连接跳转</a> </div> <br>  <div @click.self="box" :style="{border:'solid 2px red'}">  <a href="https://www.cnblogs.com/haima" @click.prevent="links">父级加self,阻止a标签冒泡响应事件,点谁谁响应事件</a> </div> <br>  <div @click.capture="box" :style="{border:'solid 2px red'}">  <a href="https://www.cnblogs.com/haima" @click.prevent="links">从父级->子级元素响应事件</a> </div> <br>  <div @click="box" :style="{border:'solid 2px red'}">  <a href="https://www.cnblogs.com/haima" @click.once.stop.prevent="links">从父级->子级元素响应事件</a> </div> </div> <script> var app = new Vue({ el: '#hdcms', data: {}, methods: { box(){ alert('div'); }, links(){ alert('www.cnblogs.com/haima'); } } }); </script> </body> </html>

效果:

27.28. VUE学习之--事件修饰符之stop&capture&self&once实例详解的更多相关文章

vue学习(六) 事件修饰符 stop prevent capture self once
//html <div id="app"> <div @click="divHandler" style="height:150px ...
Vue – 基础学习(4)&colon;事件修饰符
Vue – 基础学习(3):事件修饰符
[vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)
preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...
vue指令与事件修饰符
一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...
vue中的事件修饰符
vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...
33、vue中的事件修饰符&period;stop、&period;prevent、&period;self、&period;capture、&period;once
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Vue指令之事件修饰符
事件修饰符: + .stop 阻止冒泡 + .prevent 阻止默认事件 + .capture 添加事件侦听器时使用事件捕获模式 + .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 ...
怎样在 Vue 中使用事件修饰符 &quest;
Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发等等. 这时就需要使用到事件修饰 ...
（二）咋使用VUE中的事件修饰符
1,stop修饰符:阻止事件冒泡首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下现在我们在click后面添 ...

随机推荐

手机App开发
/* * 登录:输入 */ public void login(String user, String pwd, TextHttpResponseHandler responsehandler) { ...
VC++自绘界面
// MySkinDlg.cpp : implementation file // #include "stdafx.h" #include "MySkin.h&quot ...
利用Android属性动画实现Banner的原理与实践
事实上在Android刚推出属性动画的时候.就想利用它来设计一个Banner控件,一直没什么时间尝试. 在当时看我们应用中的Banner,使用计时器来控制自己主动播放,设置一个非常大的数,利用余数原理 ...
metaq spring
spring metaq spring bean 配置 <bean id="sessionFactory" class="com.taobao.metamorpho ...
oracle处理节点之间的父子关系
通常当与树的结构之间的关系处理,这是一个很复杂的事情,我们可以通过程序代码去逐层遍历父或子节点,这样做的缺点是很明显,效率不高,操作复杂性是比较大的.而当我们使用Oracle当数据库,我们可以有一个简 ...
CSS3实现DIV垂直居中+水平居中的四种方法
<div class="div1"> <div class="div2"></div> </div> html结 ...
Atitit 分布式管理 vs 集中式管理
Atitit 分布式管理 vs 集中式管理 1. 集中式管理缺点 1 1.1. 单点故障 1 1.2. 没有灵活性 1 1.3. 打败vs 征服参考尼可罗·马基雅弗利编著的<君主论> ...
MultipartFile实现文件上传
一.主要有两个java类,和一般的servlet放在一起即可. 1.FileUploadBean.java package chb.demo.web;import org.springframewor ...
0068 Git入门的第一节课
这是猴子都懂的Git入门的学习笔记 Git安装与配置下载安装Git:http://git-scm.com/ 从开始菜单启动Git Bash $ git --version git version ...
springboot 搭建简单 web项目【springboot + freemark模板 + yml 配置文件 + 热修复 + 测试用例】附源码
项目地址: https://gitee.com/sanmubird/springboot-simpleweb.git 项目介绍: 本项目主要有一下内容: 1: springboot yml 配置 ...