学习准备:

①、顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“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学习之路第八篇:事件修饰符的更多相关文章

  1. Vue基础知识之常用属性和事件修饰符(二)

    Vue中的常用选项 1.计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法.里面的 计算属性简单来说,就是根据数据推算出来的值,当给这个值赋值时可以影响其 ...

  2. Vue学习之路第三篇:插值表达式和v-text的区别

    上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...

  3. Vue学习之路第二十篇:Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  4. Vue学习之路第十一篇:为页面元素设置class类样式

    1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...

  5. Vue学习之路第十篇:简单计算器的实现

    前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...

  6. Vue学习之路第七篇:跑马灯项目实现

    前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目. 学前准备: 需要掌握定时器的两个函数:setInterval和clearInterval以 ...

  7. Vue学习之路第六篇:v-on

    v-on指令用来触发页面事件的指令. <body> <div id="app"> <button v-on:click="show()&qu ...

  8. Vue学习之路第五篇:v-bind

    v-bind:是Vue提供的用于绑定html属性的指令. html中常见的属性有:id.class.src.title.style等,他们都是以 名称/值对 的形式出现,如:id="firs ...

  9. Vue学习之路第四篇:v-html指令

    上一篇我们讲解了两种方式,把Vue对象的数据展示在页面上: 1.插值表达式 2.v-text指令 但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如 ...

随机推荐

  1. Python笔记9-----不等长列表转化成DataFrame

    1.不同长度的列表合并成DataFrame. 法1: ntest=['a','b'] ltest=[[1,2],[4,5,6]] 先变成等长的列表:(a:1),(a:2),(b:4),(b:5),(b ...

  2. 用基于WebGL的BabylonJS来共享你的3D扫描模型

    转自:http://www.geekfan.net/6578/ 用基于WebGL的BabylonJS来共享你的3D扫描模型 杰克祥子 2014 年 2 月 26 日 0 条评论 标签:3D扫描 , B ...

  3. Project Euler 19 Counting Sundays( 蔡勒公式计算星期数 )

    题意:在二十世纪(1901年1月1日到2000年12月31日)中,有多少个月的1号是星期天? 蔡勒公式:计算 ( year , month , day ) 是星期几 以下图片仅供学习! /****** ...

  4. windows 查看端口号被占用

    1.netstat  -ano 2.tasklist | findstr xxx 3.进程管理杀掉

  5. 题解 ZOJ3203 Light Bulb

    也就是loj上的#10016灯泡了... 先上原图: 因为长度肯定是个开口向下的二次函数,所以先是确定用三分来找位置,然后想办法求出当前阴影长度 看到这条斜线,就想到了一次函数,所以就建了一个系,没想 ...

  6. CAD教程--嵌入表格

    1.第一步,打开excel复制一下表格 2.第二步,打开CAD,选择编辑->选择性粘贴->autocad图元,左键点击一下图就行了,找找图,放大到适合的比例就行了.

  7. Qunie——自我生成程序

    Qunie是一段没有输入.但输出和它本身源代码同样的程序.本文无不论什么高深技术,纯属娱乐! 近期看到wikipedia的一个词条--Quine,简单介绍部分摘录于此,并简要翻译: A quine i ...

  8. codeforces 571A--Lengthening Sticks(组合+容斥)

    A. Lengthening Sticks time limit per test 1 second memory limit per test 256 megabytes input standar ...

  9. 【Swift】学习笔记(六)——函数

    函数  懂编程语言的来说这个是最主要的了,不论什么语言都有函数这个概念.函数就是完毕特定任务的独立代码块. 函数怎么创建: 1.创建一个无參无返回值的函数(实际上全部的函数都有返回值,这个函数返回vo ...

  10. Java之旅--Web.xml解析

    Windows的IIS,是用UI界面进行网站的配置.Linux以下的差点儿全部系统,都是使用配置文件来进行配置,Java容器(JBoss/Tomcat/Jetty/WebSphere/WebLogic ...