官网有一个提醒:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 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. c#开启线程池超出索引

    这样写会超出索引,foreach好像不会超出,原因可能是开启线程池需要时间,成功开启之后,一次循环已经结束,这个没有验证. 以下这个做法是不对的,我也是看网上的贴这样写,结果是少执行了一个.推荐大家还 ...

  2. The openssl extension is missing, which means that secure HTTPS transfers are impossible

    执行命令:curl -sS https://getcomposer.org/installer | php报错如下Some settings on your machine make Composer ...

  3. json —— pickle 的序列化和反序列化

    前言json的序列化和反序列化 1, json 只能序列化简单的数据类型,如,列表,字典,字符串,等简单的类型,不能序列化复杂的类型. 2, json 是支持所有的语言的,多以我们跨语言的时候都是用j ...

  4. sql/pl 安装并连接Oracle数据库

    1,首先,先下载pl/sql devloper 安装包.下载对应版本的安装包 下载地址  https://www.allroundautomations.com/bodyplsqldevreg.htm ...

  5. Windows10官方正版系统的安装、激活、升级、U盘制作,无毒无害无捆绑无风险教程

    一般电脑系统出了其他问题或电脑用久太卡了,可以选择此类方法解决系统卡顿问题,重置电脑系统或也可以恢复出厂设置 如果出现重置找不到恢复环境问题 可以通过下载系统镜像来解决,进入 MSDN 网站下载所需系 ...

  6. AcWing 246. 区间最大公约数

    246. 区间最大公约数 思路: 首先根据更相减损术,我们得到一个结论: \(gcd(a_l, a_{l+1}, ...,a_r) = gcd(a_l, a_{l+1}-a_l, a_{l+2}-a_ ...

  7. 如何使用 Vue 来实现一个项目多平台打包?

    这个需求是源于我们要根据一个项目,针对某些组件(比如:日期 和 下拉组件 ) 和 页面 做终端的兼容,最终需要实现打包成2个平台:h5 和 pc  H5平台,日期组件:                ...

  8. python_tkinter弹出对话框1

    tkinter提供了三个模块,可以创建弹出对话窗口:(使用必须单独导入模块) 1.messagebox 消息对话框 示例:askokcancel import tkinter # 导入消息对话框子模块 ...

  9. 图像Image类、打印Printing相关

    一.Images 1.概述 Image 类为Bitmap(位图) 和 Metafile(矢量图) 的类提供功能的抽象基类.Image类不能直接创建对象的,但Image.FromFile()返回的是Bi ...

  10. 第一次的django 和html的插肩而过

    新建一个Python Django工程: Win+R进入cmd命令界面,并cd到指定工程目录下,比如我的工程目录是E:\wamp\Apache24\www\ 输入E: 跳转E盘 输入cd wamp\A ...