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. 随机逻辑回归random logistic regression-特征筛选

    python信用评分卡(附代码,博主录制) https://study.163.com/course/introduction.htm?courseId=1005214003&utm_camp ...

  2. DirectX11--HLSL编译着色器的三种方法

    前言 本教程不考虑Effects11(FX11),而是基于原始的HLSL. 目前编译与加载着色器的方法如下: 使用Visual Studio中的HLSL编译器,随项目编译期间一同编译,并生成.cso( ...

  3. 前端面试题整理—Node篇

    1.node有哪些特征,与其他服务器端对比 特征:单线程.事件驱动.非阻塞I/O node 无法直接渲染静态页面,提供静态服务 node 没有根目录的概念 node 必须通过路由程序指定文件才能渲染文 ...

  4. 【DirectX12】第六章-练习

    练习3. (a) //LINELIST std::array<VPosData, > posData = { VPosData({ XMFLOAT3(-2.0f, -1.0f, +1.0f ...

  5. 移动端返回上一页，刚需！document.referrer 详解

    返回上一页,在PC端我们可以使用:history.go(-1)或者history.back(),可以正常返回第一层.这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问 ...

  6. 初识Asp.Net WebApi

    using System;using System.Collections.Generic;using System.Linq;using System.Net.Http;using System.T ...

  7. redis集群伸缩【转】

    一:实验介绍 在不影响集群对外服务的情况下,可以为集群添加节点进行扩容,也可以下线部分节点进行缩容. 原理可以抽象为槽和对应数据在不同节点之间灵活移动. 如果希望加入一个节点来实现集群扩容时,需要通过 ...

  8. Mac安装SecureCRT

    8.3.1版本 链接:https://pan.baidu.com/s/1ohHunH_OVewF4QuRUzmChQ 密码:mc77 下载解压后直接是.app 直接打开会提示文件损害 打开终端,输入如 ...

  9. 013_UDP专项研究监控

    数据源: /proc/net/snmp; 采集方式:累计值,每10秒采集一次取差值: 指标:net.snmp.udp (key: system); Out Datagrams: udp层发送的数据包总 ...

  10. 07binlog日志介绍

    设置日志格式为row 创建数据库和表 mysql> create database chinasoft charset=utf8mb4; mysql> use chinasoft; mys ...