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):事件修饰符
随机推荐
- Task3.PyTorch实现Logistic regression
1.PyTorch基础实现代码 import torch from torch.autograd import Variable torch.manual_seed(2) x_data = Varia ...
- C#语句，console，C#//,/**/
].
- php str_replace()函数 语法
php str_replace()函数 语法 作用:字符串替换操作,区分大小写大理石构件 语法:str_replace(find,replace,string,count) 参数: 参数 描述 fin ...
- spfa求次短路
思路:先算出每个点到1的最短路d1[i],记录下路径,然后枚举最短路上的边 删掉之后再求一遍最短路,那么这时的最短路就可能是答案. 但是这个做法是错误的,可以被卡掉. 比如根据下面的例题生成的一个数据 ...
- PHPExcel笔记
PHPExcel可是个好东东,功能强大,下面这是一个phpExcel简易中文帮助手册,列举了各种属性,以及常用的操作方法,是每一个都用实例加以说明,希望对大家有所帮助. 引用PHPExcel incl ...
- 20180826(04)-Java序列化
Java序列化 Java 提供了一种对象序列化的机制,该机制中,一个对象可以被表示为一个字节序列,该字节序列包括该对象的数据.有关对象的类型的信息和存储在对象中数据的类型 将序列化对象写入文件之后,可 ...
- ps磨皮的方法
磨皮顾名思义就是将皮肤模糊掉,它可以去除皮肤上的一些斑点以及细纹,从而使皮肤看起来更加光滑.下面就是两张磨皮前后的对比图,很明显右边的人物的皮肤看起来要更好一些:给人的视觉效果也更年轻一点. 磨皮前后 ...
- SQLiteDatabase 数据库使用
0 SQLiteDatabases数据库特点 一种切入式关系型数据库,支持事务,可使用SQL语言,独立,无需服务.程序内通过类名可访问数据库,程序外不可以访问. SQLiteDatabases数据库使 ...
- Linux Weblogic部署web项目（war包）
第一步,启动并访问weblogic,进入登录页面 第二步,进入主页面,开始部署项目 第三步,上载项目war包 选择需要上载的本地war包 第四步,开始项目配置 继续下一步 选择红色标记的配置 第五步, ...
- jmeter测试https请求
测试https请求时,需要添加证书 目录 1.下载证书 2.导入 3.执行https请求 1.下载证书 在浏览器中打开要测试的https协议的网站,以谷歌为例打开,下载证书到桌面 4.一直点击下一步 ...