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):事件修饰符
随机推荐
- kwargs - Key words arguments in python function
This is a tutorial of how to use *args and **kwargs For defining the default value of arguments that ...
- HashMap接口测试
package com.iotek.map; import java.util.Collection;import java.util.HashMap;import java.util.Map;imp ...
- git使用技巧总结
一.把github上的代码下载下来 git clone ...... 二.把修改的代码提交上去 git add .... git commit -m "........" git ...
- Cluster基础(五)：配置tracker、配置storage、文件测试及web访问
一.配置tracker 目标: FastDFS是一个分布式文件系统,主要的服务器角色有Tracker和Storage.本例安装一台Tracker,实现以下功能: 接受客户端的访问 检索存储节点,为客户 ...
- Uva 1471 Defense Lines（LIS变形）
题意: 给你一个数组,让你删除一个连续的子序列,使得剩下的序列中有最长上升子序列, 求出这个长度. 题解: 预处理:先求一个last[i],以a[i]为开始的合法最长上升子序列的长度.再求一个pre[ ...
- 解决IDEA输入法输入中文候选框不显示问题
本机环境为: 系统: win7 jdk版本:jdk1.8.0_65 idea版本:2017.2.3 解决方法:关掉idea,进入idea的安装目录找到jre64文件夹重命名为j ...
- mybatis 绑定 statement 失败
错误信息:org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) 问题原因:编译时没有将mapp ...
- Android7.1后对于Toast类型窗口的限制
在处理问题的时候,经常会遇到ANR,停止运行等问题,经过分析和验证,和如下的一行关键log有关 WindowManager: Adding more than one toast window for ...
- Python笔记(二十一)_内置函数、内置方法
内置函数 issubclass(class1,class2) 判断class1类是否为class2类的子类,返回True和False 注意1:类会被认为是自身的子类 >>>issub ...
- Python笔记(十四)_永久存储pickle
pickle模块:将所有的Python对象转换成二进制文件存放 应用场景:编程时最好将大对象(列表.字典.集合等)用pickle写成永久数据包供程序调用,而不是直接写入程序 写入过程:将list转换为 ...