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

@click.prevent.self =“c”  总是先执行prevent,无论是内部元素还是本身元素触发,他都会prevent默认事件。只不过只有当你点击a元素的时候,才会触发c事件,因此会阻止所有的点击

@click.self.prevent =“c” 当你点击的元素是a的时候,才会prevent默认事件,而且执行c事件,因此只会阻止对元素自身的点击。

对官网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事件修饰符,.capture关键字详解

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

  9. vue 事件修饰符

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

随机推荐

  1. ASE19团队项目 beta阶段 model组 scrum4 记录

    本次会议于12月5日,19时30分在微软北京西二号楼sky garden召开,持续10分钟. 与会人员:Lei Chai, Linfeng Qi, Xueqing Wu, Yutong Ling (Z ...

  2. java序列化和反序列化使用总结

    一.概念 java对象序列化的意思就是将对象的状态转化成字节流,以后可以通过这些值再生成相同状态的对象.对象序列化是对象持久化的一种实现方法,它是将对象的属性和方法转化为一种序列化的形式用于存储和传输 ...

  3. window下redis的安装和使用

    1.下载及安装redis 下载地址:https://github.com/dmajkic/redis/downloads 找到对应的版本下载安装 打开cmd窗口,用cd命令进入到安装redis的根目录 ...

  4. django的信号应用

    问题? 比如说我们在操作数据库的时候,要在插入数据之前写入日志,插入完成之后也写入日志,那这个就会用到我们今天的django信号. 也许你会想到,函数装饰器的有这样的功能.其实不用那个,django的 ...

  5. 07 Windows编程——窗口滚动条

    两个函数:GetScrolnfo和SetScrollnfo一个结构:SCROLLINFO两个消息:WM_CREATE和WM_SIZE 滚动条结构体 typedef struct tagSCROLLIN ...

  6. Paper Reading:HyperNet

    论文:HyperNet: Towards Accurate Region Proposal Generation and Joint Object Detection 发表时间:2016 发表作者:( ...

  7. MATLAB中.m文件生成.dll

    1.配置编译环境 在命令行窗口输入: mbuild -setup 如果出现以下提示信息说明成功: 如果提示信息为: 错误使用mbuild(line 164) Unable to complete su ...

  8. MongoDB同步机制

    复制 在此页 冗余和数据可用性 在MongoDB中复制 异步复制 自动故障转移 读取操作 交易次数 更改流 附加的功能 甲副本集 MongoDB中是一组mongod其保持相同的数据集的过程.副本集提供 ...

  9. app连接线上数据库进行本地接口测试

    1.将开发环境下数据库配置改为生产环境下的数据库连接 2.备份生产环境下的数据库数据以及结构,使用Postman请求开发(本地)环境下的接口 3.打开手机上安装的线上app改动接口时查看app是否发生 ...

  10. Guardian of Decency POJ - 2771 【二分匹配,最大独立集】

    Problem DescriptionFrank N. Stein is a very conservative high-school teacher. He wants to take some ...