1、用.stop来阻止冒泡(点击click按钮之后，先执行clickBtn2方法，然后执行clickBtn1方法，.stop命令阻止了clickBtn1方法的执行)

2、使用.prevent命令来阻止默认事件

3、使用.capture实现捕获触发事件的机制，即执行完clickBtn3执行clickBtn4

4、使用.self实现只有点击当前元素的时候，才会触发事件处理函数

5、.once 值触发一次事件处理函数

vue 事件修饰符的更多相关文章

  1. Vue—事件修饰符

    Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue. ...

  2. vue事件修饰符(once:prev:stop)

    vue事件修饰符(once:prev:stop) stop修饰符  效果如下: 当你鼠标在这个div里的时候,x与y的值:会随着鼠标的变化而变化.但是当鼠标放在stopMoving的时候,x与y的值是 ...

  3. Vue2.0学习笔记：Vue事件修饰符的使用

    事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...

  4. Vue事件修饰符详解

    整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,于是查阅了资料,现在记录下来与大家分享 先给大家画一个示意图理解一下冒泡和捕获 (1) .stop修饰符 请看如下 ...

  5. vue事件修饰符与按钮修饰符

    事件修饰符:(当事件无需传参数时可直接写成以下形式,有参数时则为@click.stop="handleLiClick($event)") stop:阻止事件冒泡行为(子元素被点击, ...

  6. vue 事件修饰符（阻止默认行为和事件冒泡）

    1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ...

  7. vue事件修饰符

    阻止单击事件冒泡 <a v-on:click.stop="doThis"></a>提交事件不再重载页面<form v-on:submit.preven ...

  8. 对官网vue事件修饰符串联的顺序如何理解？

    官网有一个提醒:使用修饰符时,顺序很重要:相应的代码会以同样的顺序产生.因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent ...

  9. Vue事件修饰符，.capture关键字详解

    .prevent 用于阻止默认事件,点击a标签href可以打开相应的链接,那么给事件加    上此关键字,click.prevent .capture 冒泡顺序    例如 div1中嵌套div2中嵌 ...

随机推荐

  1. python模拟页面调度LRU算法

    所谓LRU算法,是指在发生缺页并且没有空闲主存块时,把最近最少使用的页面换出主存块,腾出地方来调入新页面. 问题描述:一进程获得n个主存块的使用权,对于给定的进程访问页面次序,问当采用LRU算法时,输 ...

  2. Maven 学习总结 （六） 之 版本

    版本管理 版本管理是指项目整体版本的演变过程管理.版本控制是指借助版本控制工具(如Subversion)追踪代码的每一个变更. 为了方便团队合作,项目开发过程中,大家应该使用快照版本,快照版本机制促进 ...

  3. 0412ooday01.txt=============对象和类（上）

    对象和类(上) 面向对象程序设计:面向过程的结构化程序设计.什么是抽象数据类型.什么是类 定义一个类:定义类的成员变量.定义类的方法 创建并使用对象:使用new关键字创建对象.引用类型变量.访问对象的 ...

  4. 基于jeesite的cms系统（一）：开发环境搭建

    基于jeesite的cms系统系列,是对基于jeesite进行二次开发的博客模块开发过程的总结.涉及入门安装,二次开发,部署等 一.概况: JeeSite 是一个 Java 企业级快速开发平台,基于经 ...

  5. nginx 容器反向代理网址的设置

    先讲一下场景:  nginx 容器要和SpringBoot 容器部署在一台机器上, nginx 为 SpringBoot 提供反向代理, 需要在 nginx.conf 中写上 SpringBoot 的 ...

  6. Python——使用高德API获取POI（以深圳南山医疗保健服务POI为例）

    以下内容为原创,转载请注明出处. import xlwt #创建Excel,见代码行8,9,11,25,28:CMD下:运行pip install xlwt进行安装 import urllib.req ...

  7. count

    select deptno as 部门,count(*) as 人数from emp group by deptno;  --统计各个部门的人数

  8. PHP中的数组

    一.数组的基础 php数组的分类 按照下标的不同,php分为关联数组与索引数组: 索引数组:下标从零依次增长(以前那种) 关联数组:下标为字符串格式,每个下标字符串与数组的值一一关联对应(有点儿像对象 ...

  9. 动态将ASPX生成HTML网页并将网页导出PDF

    1.首先要找到wnvhtmlconvert.dll这个文件,并引入项目中. 2.Server.Execute("pos.aspx?id=" + ids); 执行相应的aspx网页 ...

  10. 一个老鸟发的公司内部整理的 Android 学习路线图

    基础工具部分: 中文手册,我猜测是Maven中文手册,可是我并没有找到这样的资源,欢迎知道的朋友告诉我: Android部分有 『第三方库集合』,我没能找到资源地址: 书籍我大多是给的豆瓣链接,如果觉 ...