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):事件修饰符
随机推荐
- vue项目-本机ip地址访问
修改 在 vue项目文件夹中的 package.json scripts >dev 添加 --host 0.0.0.0 "dev": "webpack-dev-se ...
- SpringCLoud之搭建Zuul网关集群
1.使用技术 Springboot,SpringCloud,Zuul,Nignx 2.目的 使用Zuul搭建微服务高可用的网关 3.项目创建 3.1 创建注册中心(略) 3.2 创建一个hello-s ...
- Java WebService服务
其中cxf框架 http://cxf.apache.org/ Apache CXF™: An Open-Source Services Framework Overview Apache CXF™ i ...
- web css
CSS圆角——透明圆角化背景图片 序言:第一章中我介绍了最基本的纯CSS圆角框的实现原理,并给出Demo,在本章中会对上一个模型作一些新的创新,实现将背景图片透明圆角化.并给出一些漂亮的通用演示效果. ...
- 20180911-Java实例01
Java 实例 – 如何编译 Java 文件 本文我们演示如何编译 HelloWorld.java 文件,其中 Java 代码如下: public class HelloWorld { public ...
- PerPoly Collision（用物体本身模型做碰撞）
打开static mesh editor,在static mesh settings里找到collision complexity选项,选择最后一项: Use Complex collision as ...
- 前端每日实战：2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/vjLQMM 可交互视频教程 此视频是可以交 ...
- php面向对象编程(oop)基础知识示例解释
面向对象并不是一种技术,而是一种思想,是一种解决问题的最基本的思维方式!如何理解使用?OOP:面向对象编程 (直接代码说明) 1.面向对象的基本概念 示例demo: <?php header(& ...
- 万能的gitignore文件模版
## .gitignore for Grails 1.2 and 1.3 # .gitignore for maven target/ *.releaseBackup # web applicatio ...
- MySQL工作中遇到的问题记录
1:log_slave_updates: 从库1搭建级联从库2,从库1需要开启log_slave_updates,修改/etc/my.cnf,增加一行log_slave_updates=1,重启数据库 ...