对官网vue事件修饰符串联的顺序如何理解?
官网有一个提醒:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 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事件修饰符串联的顺序如何理解?的更多相关文章
- Vue—事件修饰符
Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue. ...
- vue事件修饰符(once:prev:stop)
vue事件修饰符(once:prev:stop) stop修饰符 效果如下: 当你鼠标在这个div里的时候,x与y的值:会随着鼠标的变化而变化.但是当鼠标放在stopMoving的时候,x与y的值是 ...
- Vue2.0学习笔记:Vue事件修饰符的使用
事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
- Vue事件修饰符详解
整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,于是查阅了资料,现在记录下来与大家分享 先给大家画一个示意图理解一下冒泡和捕获 (1) .stop修饰符 请看如下 ...
- vue事件修饰符与按钮修饰符
事件修饰符:(当事件无需传参数时可直接写成以下形式,有参数时则为@click.stop="handleLiClick($event)") stop:阻止事件冒泡行为(子元素被点击, ...
- vue 事件修饰符(阻止默认行为和事件冒泡)
1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ...
- vue事件修饰符
阻止单击事件冒泡 <a v-on:click.stop="doThis"></a>提交事件不再重载页面<form v-on:submit.preven ...
- Vue事件修饰符,.capture关键字详解
.prevent 用于阻止默认事件,点击a标签href可以打开相应的链接,那么给事件加 上此关键字,click.prevent .capture 冒泡顺序 例如 div1中嵌套div2中嵌 ...
- vue 事件修饰符
1.用.stop来阻止冒泡(点击click按钮之后,先执行clickBtn2方法,然后执行clickBtn1方法,.stop命令阻止了clickBtn1方法的执行) 2.使用.prevent命令来阻止 ...
随机推荐
- 自适应高度文本框 react contenteditable
import React, { Component } from 'react'; import PropTypes from 'prop-types'; const reduceTargetKeys ...
- zabbix-通过自动注册自动添加主机
自动注册和自动发现可以实现一样的效果,就是自动添加符合条件的主机到监控,那跟自动发现有什么区别? 其实自动发现是由弊端的,上文也说到了,zabbix server是主动去扫描网段,寻找agent的,试 ...
- Cannot determine value type from string 'xxxxxx'
Cannot determine value type from string 'xxxxxx' 查了一下,意思就是字段和属性名没有对上. 反复查看代码,字段名和属性名一致. 最后翻阅资料得知是因为构 ...
- linux cenos开放端口
问题:8080端口不能访问 解决方案: 第1步 查看阿里云端口是否开放 网络安全>安全组>配置规则>添加入方向 第二步 查看防火墙是否开启(只说开启了防火墙的情况) 查看防火墙状态: ...
- openpyxl 设置单元格颜色
在处理excel数据格式的时候,需要对特定单元格进行颜色标注,方便相关人员查看 醒目 # -*- coding: utf-8 -*- from openpyxl import load_workboo ...
- Web服务器主动推送技术
HTTP协议遵循经典的客户端-服务器模型,客户端发送一个请求,然后等待服务器端的响应,服务器端只能在接收到客户端的请求之后进行响应,不能主动的发送数据到客户端. 客户端想要在不刷新页面的情况下实时获取 ...
- Java基础 - Map接口的实现类 : HashedMap / LinkedHashMap /TreeMap 的构造/修改/遍历/ 集合视图方法/双向迭代输出
Map笔记: import java.util.*; /**一:Collection接口的 * Map接口: HashMap(主要实现类) : HashedMap / LinkedHashMap /T ...
- Windows服务 System.ServiceProcess.ServiceBase类
一.Windows服务 1.Windows服务应用程序是一种需要长期运行的应用程序,它适合服务器环境. 2.无用户界面,任何消息都会写进Windows事件日志. 3.随计算机启动而启动,不需要用户一定 ...
- Java锁--ReentrantLock
转载请注明出处:http://www.cnblogs.com/skywang12345/p/3496101.html ReentrantLock介绍 ReentrantLock是一个可重入的互斥锁,又 ...
- 第六章 Flask数据库(二)
Flask-SQLALchemy Flask-SQLALchemy 是一个给你的应用添加 SQLALchemy 支持的 Flask 扩展. 它需要 SQLAlchemy 0.6 或更高的版本.它致力于 ...