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. 贝叶斯A/B测试 - 一种计算两种概率分布差异性的方法过程

    1. 控制变量 0x1:控制变量主要思想 科学中对于多因素(多变量)的问题,常常采用控制因素(变量)的方法,吧多因素的问题变成多个单因素的问题.每一次只改变其中的某一个因素,而控制其余几个因素不变,从 ...

  2. APACHE 安装

    APACHE  安装 到官网下载apache软件 解压apache软件 安装APR相关优化模块 创建APACHE安装目录 安装apche,开始预编译(检测安装环境) 编译和安装 启动时报错及排错 修改 ...

  3. Git安装与仓库搭建

    yum install git-all cd /srv git init --bare net_server.git git remote - v git remote add server root ...

  4. YOLO学习

    YOLO1:https://blog.csdn.net/m0_37192554/article/details/81092514 https://blog.csdn.net/shuiyixin/art ...

  5. gdb nnet3-compute

    gdb nnet3-compute测试命令 $ matrix-dim 'scp: head -n 1 data/test/feats.scp|' ~/kaldi/src/bin/matrix-dim ...

  6. java实现多个文件以压缩包导出到本地

    描述:使用java将多个文件同时压缩为压缩包,并导出到本地 /** *压缩文件并导出 */ public static void zipFiles() throws IOException { Fil ...

  7. Java 实现TCP/IP协议的收发数据（服务端）

    功能如下: 注: 只有服务端,没有客户端,测试时采用第三方软件作为客户端的. 收发数据目前能正常收发数据,只是中文的会变成乱码显示. 采用Thread类实现一个收发数据的线程. 服务端代码: impo ...

  8. 开发一个项目之代码规范ESLint

    ESLint{ "rules": { "semi": ["error", "always"], } }error lev ...

  9. IIS7二级域名添加同一证书

    IIS7二级域名添加同一证书, 先绑定第一个域名到443 ,之后的用以下命令行绑定 cd C:\Windows\System32\Inetsrv\appcmd set site /site.name: ...

  10. iTOP-4418/6818开发板用户使用手册内容有哪些

                    更多内容分享,请继续期待 iTOP-6818开发板与4418开发板共兼容同一底板: 核心板:::::: 尺寸:50mm*60mm 高度:核心板连接器组合高度1.5mm ...