Vue--事件处理（逐个学习事件修饰符）
.capture.self.once
主要学习这三个事件修饰符的用法先来看看capture
capture即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。
就是谁有该事件修饰符，就先触发谁。 例子如下:
<html>
<head>
<title>Vue事件修饰符 capture</title>
<script src="vue.js"></script>
<style type="text/css">
*{
text-align:center;
line-height:40px;
margin:0 auto;
}
div {
width:100px;
}
#obj1 {
background:deeppink;
}
#obj2 {
background:pink;
}
#obj3 {
background:hotpink;
}
#obj4 {
background:#ff4225
} </style>
</head>
<body>
<div id="example">
<div id="obj1" @click.capture="doSomething">
obj1
<div id="obj2" @click.capture="doSomething">
obj2
<div id="obj3" @click="doSomething">
obj3
<div id="obj4" @click="doSomething">
obj4
</div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el:"#example",
data:{
id:""
},
methods:{
doSomething:function(event){
this.id = event.currentTarget.id;
alert(this.id);
}
}
})
</script>
</body>
</html>
浏览器打开如下：
当点击obj4的时候 触发顺序是 obj1,obj2,obj4,obj3
由于1，2有修饰符，故而先触发事件，然后就是4本身触发，最后冒泡事件。
self
self可以理解为跳过冒泡事件和捕获事件，只有直接作用在该元素上的事件才可以执行。
<html>
<head>
<title>Vue事件修饰符 self</title>
<script src="vue.js"></script>
<style type="text/css">
*{
text-align:center;
line-height:40px;
margin:0 auto;
}
div {
width:100px;
}
#obj1 {
background:deeppink;
}
#obj2 {
background:pink;
}
#obj3 {
background:hotpink;
}
#obj4 {
background:#ff4225
} </style>
</head>
<body>
<div id="example">
<div id="obj1" @click="doSomething">
obj1
<div id="obj2" @click="doSomething">
obj2
<div id="obj3" @click.self="doSomething">
obj3
<div id="obj4" @click="doSomething">
obj4
</div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el:"#example",
data:{
id:""
},
methods:{
doSomething:function(event){
this.id = event.currentTarget.id;
alert(this.id);
}
}
})
</script>
</body>
</html>
上面的例子当点击obj4的时候会依次弹出 obj4,obj2,obj1 ,只有使用了事件修饰符的obj3没有弹出。只有当我们点击obj3才会触发它
once
这个事件修饰符让点击事件只能触发一次
<html>
<head>
<title>Vue事件修饰符 once</title>
<script src="vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="example">
<button @click.once="clickme">点击我</button>
</div>
<script>
new Vue({
el:"#example",
methods:{
clickme(){
alert("我被触发了");
}
}
})
</script>
</body>
</html>
当点击第一次弹出 “我被触发了”第二次则不会触发点击事件也就不会弹出了
Vue--事件处理（逐个学习事件修饰符）的更多相关文章
- 学习Vue第三节，事件修饰符stop、prevent、capture、self、once
事件修饰符: .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 .once 事 ...
- Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
1.绑定监听@click: (以监听click为例,其他如keyup,用法类似) v-on:click="fun" @click="fun" @click ...
- Vue--按键修饰符（逐个学习按键修饰符）
在监听键盘事件时,我们经常需要检查常见的键值.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -- ...
- 第二章 Vue快速入门--12 事件修饰符的介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Vue事件修饰符详解
整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,于是查阅了资料,现在记录下来与大家分享 先给大家画一个示意图理解一下冒泡和捕获 (1) .stop修饰符 请看如下 ...
- Vue 事件的基本使用 && 事件修饰符
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- Vue2.0学习笔记：Vue事件修饰符的使用
事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
- Vue学习之路第八篇：事件修饰符
学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...
- Vue – 基础学习(4):事件修饰符
Vue – 基础学习(3):事件修饰符
随机推荐
- linux运维、架构之路-Zabbix自动化
一.Zabbix自定义监控 web01客户端修改/etc/zabbix/zabbix_agentd.conf [root@m01 tools]# echo "UserParameter=lo ...
- 数组与List互转的坑
一.数组转List 非原始类型的数组转List有很多种方式:假设有Integer[] arr = {"a", "b", "c"}; 1.Li ...
- [LOJ161] 仙人掌计数
Statement 带标号仙人掌计数问题. \(n< 131072\). Solution 设\(x\)个点的仙人掌个数的生成函数为\(C(x)\) 对于与根相邻的块, 还是仙人掌, 生成函数为 ...
- LRU management
LRU management 字典树用来查找值,实现map<string,int>操作 tips:tot必须从一开始QAQ #include<bits/stdc++.h> us ...
- 阿里云不支持stmp 的25端口，必须
第一种方法 到阿里云解封25端口 特别注意阿里云的<25端口使用服务协议>: 我/我公司承诺并保证TCP 25端口仅用来连接第三方的SMTP服务器,从第三方的SMTP服务器外发邮件. ...
- DHCP服务器怎么设置怎么启动
DHCP:动态主机配置协议,服务器用于为网络中的客户端自动分配IP地址.这种方法避免了由于手动配置IP地址导致的IP地址冲突问题,同时也减少了网络管理员的工作量. 工具/原料 在配置DHCP服务器时, ...
- Step2 - How to: Implement a Windows Communication Foundation Service Contract
This is the second of six tasks required to create a basic Windows Communication Foundation (WCF) se ...
- Note-Git：Git 笔记
ylbtech-Note-Git:Git 笔记 1.返回顶部 · Git 分支管理: 主干/master.热修正/hotfix.预生产/release.开发develop.个人1(个人.小团队)/f ...
- QQ空间分享网址
现在大部分网站都在每个界面设计了分享这个功能,但还是有的网页没有(比如 B 站只能分享具体的视频).在原来的 QQ 空间分享的地方已经找不到法自己创建分享.上网一搜有分享的接口,可这个接口是给开发者用 ...
- CSS-同一行的元素高度统一
一:flex 大法 步骤 设置外部容器 display: flex; 设置内部容器 align-items: stretch; 原理 https://developer.mozilla.org/zh- ...