官网有一个提醒:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 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. 2.Buffer 缓冲区

    /*缓冲区(Buffer)*/ Buffer 就像一个数组,可以保存多个相同类型的数据.根据数据类型不同(boolean 除外),有以下Buffer常用子类: /*ByteBuffer*/(常用) . ...

  2. FPGA学习笔记——点亮LED

    软件平台:win7(64bit) + Quartus II 9.1 (64-Bit) 硬件平台:东理电子Easy-FPGA Cyclone II EP2C5T114C8N 这个开发板买了很长时间了,买 ...

  3. 内核对象&句柄

    目录 1 内核对象的概念 2 内核对象的使用计数 3 句柄 4 句柄表   项目工程代码中设计句柄的使用,一时不知句柄是何物,通过查阅自学之后,对句柄及其使用有一个初步的了解.分享出来,算是抛砖引玉吧 ...

  4. js之head请求,闪电般实现交互

    平时我们用到的请求一般为post和get,今天介绍一种新的请求方式,head请求,顾名思义,head请求就是请求头部信息的,也只能请求头部信息,所以相应速度非常快,可以快速的实现前后端的交互 $.aj ...

  5. 启动nginx 80端口被占用:tcp 0 0 127.0.0.1:80 127.0.0.1:34932 TIME_WAIT -

    1.启动nginx命令./sbin/nginx 2.提示80端口被占用 nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already ...

  6. django--没有整理,笔记

    https://docs.djangoproject.com/en/2.2/常用的数据路命令:python manage.py makemigrations 数据移植准备python manage.p ...

  7. Jquery select 三级联动 (需要JSON数据)

    Scripts/Category.js //Jquery三级类别联动 $(function () { BindCategory(); }) function BindCategory() { var ...

  8. 怎么学好js

    Js给人那种感觉的原因多半是因为它如下的特点: A:本身知识很抽象.晦涩难懂,如:闭包.内置对象.DOM. B:本身内容很多,如函数库.对象库就一大堆. C:混合多种编程思想.它里面不但牵涉面向过程编 ...

  9. const int* p

    若纠结于const int* p,int const* p,int* const p这三个指针,可以看视频 https://www.icourse163.org/learn/BUPT-10035640 ...

  10. java监测硬盘空间大小

    package com.zuidaima.util.file; import java.io.File; public class FreeDiskSpace { public static void ...