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):事件修饰符
随机推荐
- Django2 + ORM 做一个简单的登陆
. ├── db.sqlite3 ├── manage.py ├── myormLogin │ ├── __init__.py │ ├── __pycache__ │ │ ├── __ ...
- php strrchr()函数 语法
php strrchr()函数 语法 作用:返回一个字符串在另一个字符串中最后一次出现的位置,并返回从该位置到字符串结尾的所有字符.大理石平台哪家好 语法:strrchr(string,char) 参 ...
- [CSP-S模拟测试]:降雷皇（DP+树状数组）
题目描述 降雷皇哈蒙很喜欢雷电,他想找到神奇的电光.哈蒙有$n$条导线排成一排,每条导线有一个电阻值,神奇的电光只能从一根导线传到电阻比它大的上面,而且必须从左边向右传导,当然导线不必是连续的.哈蒙想 ...
- 多行文本溢出隐藏处理，兼容ie，火狐
问题 多行文本溢出隐藏,webkit内核浏览器如谷歌支持如下写法: overflow: hidden; text-overflow: ellipsis; display: -webkit-box; - ...
- oracle、sql developer 删除某用户下所有的表
1.在sql developer内 select 'drop table "'||table_name||'";' from cat where table_type= ...
- 设计模式 - 建造者模式 Builder Pattern
简介 场景 在创建复杂对象时,用户无须关心该对象所包含的属性以及它们的组装方式,只需要指定复杂对象的类型和内容就可以构建它们. 模式定义 建造者模式:将一个复杂对象的构建与表示分离,使得同样的构建过程 ...
- Vagrant 入门 - box
原文地址 Vagrant 使用基础镜像来快速克隆虚拟机,而不是从头开始构建虚拟机.这些基础镜像在 Vagrant 中被称为"box",并且指定用于 Vagrant 环境的 box ...
- C#将字符串Split()成数组
string str="aaajbbbjccc";string[] sArray=str.Split('j');foreach(string i in sArray) Respon ...
- mybatis插件机制及分页插件原理
MyBatis 插件原理与自定义插件: MyBatis 通过提供插件机制,让我们可以根据自己的需要去增强MyBatis 的功能.需要注意的是,如果没有完全理解MyBatis 的运行原理和插件的工作方式 ...
- CompletionService的好处与使用场景
转自:https://blog.csdn.net/jdsjlzx/article/details/52912701 FutureTask既是Future.Runnable,又是包装了Callable( ...