Vue学习之路第八篇：事件修饰符
学习准备：
①、顾名思义，“事件修饰符”那么肯定是用来修饰事件，既然和事件有关系，那么肯定和“v-on”指令（也可简写为：@）有关系了。
②、事件修饰符有以下几类：
.stop：阻止冒泡
.prevent：阻止默认事件
.capture：事件捕获
.self：只当事件在该元素本身触发时触发回调
.once：事件只触发一次
1、阻止冒泡
页面代码：
<div id="app" @click="clickDiv()">
<button @click="clickButton()">点击</button>
</div>
样式代码：
div{
background: #715F5F;
height: 100px;
width: 100px;
}
js代码：
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {},
methods : {
clickDiv(){
console.log('点击了div');
},
clickButton(){
console.log('点击了button');
}
}
});
</script>
运行效果：
当点击按钮的时候，浏览器控制台除了会输出“点击了button”还会输出“点击了div”，这是因为button按钮是div里的元素节点，当你点击button的时候，事件会向上冒泡，触发包含它的父元素所定义的事件，这就是冒泡事件。如果想阻止冒泡事件就需用到“.stop”修饰符。
<button @click.stop="clickButton">点击</button>
这里要注意“.”号不要忘记写。这时再点击按钮不会触发点击父元素div的事件。
2、阻止默认事件
什么是默认事件？如：点击a链接自动进行跳转、点击submit按钮自动提交表单等。我们以a链接为例：
<body>
<div id="app">
<a href="https://www.baidu.com" @click.prevent="linkClick()">有问题，先百度</a>
</div> <script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {},
methods : {
linkClick(){
console.log('点击了a链接');
}
}
});
</script>
</body>
加上.prevent修饰符后，a链接不能进行跳转，但是仍然可以触发click事件。
3、事件捕获
还记得冒泡事件中触发的顺序吗？即：先触发button按钮的点击事件，然后会触发button父元素div的点击事件；如果我想点击button之后先触发父元素div的点击事件，然后再触发子元素button的点击事件呢？
<div id="app" @click.capture="clickDiv">
<button @click="clickButton">点击</button>
</div>
即：在事件触发中进行捕获，优先执行含有“.capture”修饰符的事件。
4、只当事件在该元素本身触发时触发回调
<div id="app" @click.self="clickDiv">
<button @click="clickButton">点击</button>
</div>
我们在父元素div里加了“.self”，这样父元素的点击事件只有在点击自身元素的情况下才可以触发，点击其他的任何元素（如子元素button）都不会触发包含修饰符“.self”的元素事件。
5、事件只触发一次
<body>
<div id="app">
<a href="https://www.baidu.com" @click.prevent.once="clickLink()">有问题，去百度</a>
</div> <script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {},
methods : {
clickLink(){
console.log('点击了a链接');
}
}
});
</script>
</body>
①：这里a链接点击事件使用了两个事件修饰符，说明事件修饰符可以并列使用。
②：这里的修饰符“.once”的作用是让默认阻止行为（.prevent）只生效一次，所以当我们第一次点击a链接的时候，浏览器控制台会输出“点击了a链接”，但是页面不会跳转，当我们再次点击a链接的时候页面会跳转到百度页面，这就是".once"修饰符的作用。
③：大家可以把".prevent"和".once"的位置调换一下试试，即：@click.once.prevent="clickLink()"，执行的结果还是一样的。
难点分析：.stop 和 .self 的区别
.stop是用来阻止所有父元素的事件冒泡，而.self只是用来阻止子元素对本身的事件调起，而不会影响其他父元素的事件冒泡。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件修饰符</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<!-- 样式 -->
<style tyep="text/css">
#outDiv{
background: #715F5F;
height: 100px;
width: 100px;
padding: 20px;
}
#innerDiv{
background: #518E41;
height: 80px;
width: 80px;
}
</style>
</head>
<body>
<!-- 页面 -->
<div id="outDiv" @click="clickOutDiv()">
<div id="innerDiv" @click="clickInnerDiv()">
<button @click="clickButton()">点击</button>
</div>
</div> <!-- JS -->
<script type="text/javascript">
var vm = new Vue({
el : "#outDiv",
data : {},
methods : {
clickOutDiv(){
console.log('点击了外部div');
},
clickInnerDiv(){
console.log('点击了内部div');
},
clickButton(){
console.log('点击了button');
}
}
});
</script>
</body>
</html>
这里我们定义了一个外部div，外部div里又包含了一个内部div，内部div包含了button按钮。这个时候我们点击button按钮的时候，会触发外部和内部div的click事件，即冒泡事件。
如果我们把代码改为：<button @click.stop="clickButton()">点击</button>，再点击按钮的时候，将不会触发外部两个div的click事件，这个上面已经说过。
如果我们把代码改为：
<div id="outDiv" @click="clickOutDiv()">
<div id="innerDiv" @click.self="clickInnerDiv()">
<button @click="clickButton()">点击</button>
</div>
</div>
再次点击button按钮的时候，innerDiv不会触发click事件，但是不会阻止outDiv触发click事件，因为内部div加了事件修饰符“.self”，即控制本身事件不受冒泡影响。
花时间去学习，切忌浮躁，不要走马观花，还是要沉淀下来仔细研究，哪怕进步很缓慢，也要力求真正有所得。
每天进步一点点！
Vue学习之路第八篇：事件修饰符的更多相关文章
- Vue基础知识之常用属性和事件修饰符（二）
Vue中的常用选项 1.计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法.里面的 计算属性简单来说,就是根据数据推算出来的值,当给这个值赋值时可以影响其 ...
- Vue学习之路第三篇：插值表达式和v-text的区别
上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...
- Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
- Vue学习之路第十一篇：为页面元素设置class类样式
1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...
- Vue学习之路第十篇：简单计算器的实现
前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...
- Vue学习之路第七篇：跑马灯项目实现
前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目. 学前准备: 需要掌握定时器的两个函数:setInterval和clearInterval以 ...
- Vue学习之路第六篇：v-on
v-on指令用来触发页面事件的指令. <body> <div id="app"> <button v-on:click="show()&qu ...
- Vue学习之路第五篇：v-bind
v-bind:是Vue提供的用于绑定html属性的指令. html中常见的属性有:id.class.src.title.style等,他们都是以 名称/值对 的形式出现,如:id="firs ...
- Vue学习之路第四篇：v-html指令
上一篇我们讲解了两种方式,把Vue对象的数据展示在页面上: 1.插值表达式 2.v-text指令 但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如 ...
随机推荐
- 网络教程(7）OSI模型的低层模型
OSI Model——Open System Interconnection Model 开放系统互联模型
- JavaScript 三要素
一个完整的JavaScript 实现由3部分组成: ECMACcript ECMAScript 规定了这门语言的下列组成部分: 语法 类型 语句 关键字.保留字 操作符 对象为什么要使用DOM? ...
- HDU2149 - Public Sale【巴什博弈】
虽然不想,但是现实总归是现实,Lele始终没有逃过退学的命运,因为他没有拿到奖学金.现在等待他的,就是像FarmJohn一样的农田生涯. 要种田得有田才行,Lele听说街上正在举行一场别开生面的拍卖 ...
- 【Tool】Mac环境维护
1. 安装编译opencv https://blog.csdn.net/lijiang1991/article/details/50756065 /Users/yuhua.cheng/Opt/open ...
- apache https部署
1.生成证书,直接在阿里云或腾讯云中生成此处不再介绍 2.在httpd.conf中取消#LoadModule ssl_module modules/mod_ssl.so的注释 3.开启httpd-ss ...
- 使用 Laravel 5.5+ 更好的来实现 404 响应
译文首发于 使用 Laravel 5.5+ 更好的来实现 404 响应,转载请注明出处! Laravel 5.5.10 封装了两个有用的路由器方法,可以帮助我们为用户提供更好的 404 页面.现在,当 ...
- Java 学习（9）：java Stream & File & IO
Java 流(Stream).文件(File)和IO Java.io 包几乎包含了所有操作输入.输出需要的类.所有这些流类代表了输入源和输出目标. Java.io 包中的流支持很多种格式,比如:基本类 ...
- ssm整合shiro—实现认证和授权
1.简述 1.1 Apache Shiro是Java的一个安全框架.是一个相对简单的框架,主要功能有认证.授权.加密.会话管理.与Web集成.缓存等. 1.2 Shiro不会去维护用户.维护 ...
- 【转】sql 基本语法
简单语法:http://www.cnblogs.com/lyhabc/p/3691555.html 数据类型宽度:http://www.cnblogs.com/lyhabc/p/3696629.htm ...
- UVA 12124 UVAlive 3971 Assemble(二分 + 贪心)
先从中找出性能最好的那个数, 在用钱比較少的去组合,能组出来就表明答案在mid的右边,反之在左边, #include<string.h> #include<map> #incl ...