官网有一个提醒:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 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. Spark学习笔记2——RDD(上)

    目录 Spark学习笔记2--RDD(上) RDD是什么? 例子 创建 RDD 并行化方式 读取外部数据集方式 RDD 操作 转化操作 行动操作 惰性求值 Spark学习笔记2--RDD(上) 笔记摘 ...

  2. 《OAuth2.0协议安全形式化分析-》----论文摘抄整理

    ---恢复内容开始--- 本篇论文发表在计算机工程与设计,感觉写的还是很有水准的.实验部分交代的比较清楚 本篇论文的创新点: 使用Scyther工具 主要是在 DY模型下面 形式化分析了 OAuth2 ...

  3. Tornado目录

    第一篇:白话tornado源码之一个脚本引发的血案 第二篇:白话tornado源码之待请求阶段 第三篇:白话tornado源码之请求来了 第四篇:白话tornado源码之褪去模板外衣的前戏 第五篇:白 ...

  4. 集成IDE anaconda

    Anaconda 下载安装完anaconda后,会生成如下工具: 安装Anaconda不需要使用管理员权限.安装完毕后,Anaconda附带一个图形启动器(Anaconda Prompt),可以使用他 ...

  5. 优秀技术Leader应具备的六项能力

    技术Leader是互联网公司中,战斗在一线的技术领导者,技术Leader们能力的强弱,决定着公司整个技术团队的战斗力,结合我之前管理上百人技术团队的经验,谈谈我心目中优秀技术Leader五个方面的能力 ...

  6. 解决Centos /boot过小无法更新内核

    Centos7默认安装时,/boot目录设置只有150M左右,这样编译几个版本的内核/boot空间就不够用了.报错大致如下: Disk Requirements: At least 3MB more ...

  7. 如何实现数组和 List 之间的转换?(未完成)

    如何实现数组和 List 之间的转换?(未完成)

  8. ZZNU-OJ-2098 : Drink coffee【线段树合并区间或者 差分 + 二分索引树】

    : Drink coffee 时间限制: Sec 内存限制: MiB 提交: 答案正确: 提交 状态 讨论区 题目描述 为了在上课时保持清醒,凯伦需要一些咖啡.咖啡爱好者凯伦想知道最佳的温度来冲煮完美 ...

  9. Java锁--非公平锁

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/3496651.html 参考代码 下面给出Java1.7.0_40版本中,ReentrantLock和AQ ...

  10. 基于Flask和百度AI实现与机器人对话

    实现对话机器人主要有个步骤 : 一.前端收集语音传入后端 二.后端基于百度AI接口进行语音识别,转换成文字 三.对文字进行自定义验证或通过图灵端口进行处理,生成回复内容 四.将文字通过百度AI接口合成 ...