继续上一章节的冒泡逻辑,我们首先来看几个基本的事件修饰符
.stop 停止修饰符(中断冒泡)
.prevent 组织提交,在遇到form等表单提交后刷新页面时,阻止强制刷新页面
.capture 优先触发修饰符(出头鸟)
.self 自己才能出发,从子节点响应而来,遇到该函数不触发
.once 只响应一次,有且仅有一次
用@click为例:
@click.stop
@click.prevent
@click.self
@click.once
1:stop修饰符
我们在不加修饰符的情况下,可以看到,当我点击son以后,
所有的父级节点都可以执行到
然后我们在father这个节点加入一个.stop,再次点击son
可以看到只执行到添加了.stop修饰符的事件中就停止了,这就是.stop修饰符的作用
2:capture修饰符
capture的作用是,不论结构如何,只要是绑定的同一函数,优先响应的永远是含有capture修饰符的元素
PS:如果有一个以上的cpature修饰符,vue会按照前后添加的顺序进行优先响应,也就是先写capture的先执行
依然使用我们的冒泡代码
我们在father元素中事件中添加一个.capture运算符
效果:
3:self修饰符
作用:联动事件响应元素中,如果一个元素表明了该修饰符,则,不直接操作该元素无法间接触发该元素的响应事件,如果直接操作该元素,则除该元素子节点以外所有联动元素事件均生效并执行
看看代码案例
效果:
4:once修饰符
作用:声明了该修饰符的绑定函数,有且执行仅一次响应,联动响应中,如果操作该修饰符的子元素,首次正常执行,其次往后均跳过该修饰符修饰的元素响应,如果此时直接操作该元素,则会跳过该元素直接遍历其父级联动元素,如没有,则无效果。
代码:我们还是给father添加once修饰符
效果:
目前可以看到,结果和平时是没有区别的,此时我们操作第二次
可以看到多次执行后.once的修饰符修饰的元素不再继续响应了
5. prevent修饰符
作用:防止页面刷新,阻止页面刷新的方式每个前端组件各有不同,比如layui中可以通过Return False来方式页面刷新,而Vue中直接通过了元素内部的修饰就可以控制是否进行刷新响应,足以看出Vue再尽可能减少Dom操作成本上下了很大的功夫。
PS:只有强制执行刷新的控件装备该修饰符才有用,如果是通过事件进行location.reload()这种则不会生效的。
并且,跳转到任意页面后可以通过刷新来返回原页面
代码:
点击一般链接进行正常跳转
提示成功后确实通过相对路径进行跳转了
点击第二个链接
响应成功,但是并无跳转的效果
点击最后一个纯prevent的链接
已经无法响应了
以下是所有事件修饰符章节的源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="JS\vue.min.js"></script>
<script src="JS\axios.min.js"></script>
<title>冒泡反应修饰符功能</title>
<style type="text/css">
* {
margin: 0 auto;
text-align: center;
line-height: 40px;
}
div {
width: 300px;
cursor: pointer;
}
#grandFather {
background: orangered;
}
#father {
background: yellowgreen;
}
#me {
background: blueviolet;
}
#son {
background: skyblue;
}
</style>
</head>
<body>
<div id="div1">{{VueTest}}</div>
<div id="content">
<div id="grandFather" v-on:click="doc">
grandFather
<div id="father" v-on:click="doc">
father
<div id="me" v-on:click="doc">
me
<div id="son" v-on:click="doc">son</div>
</div>
</div>
</div>
<p>从前到后依次为响应顺序:<br />{{NextInfo}}</p>
</div>
<br />
<br />
<br />
<div id="prevent">
<a href="www.baidu.com" @click="locationFunc">一般的链接www.baidu.com</a>
<br />
<a href="www.baidu.com" @click.prevent="locationFunc"
>prevent之后的链接 www.baidu.com</a
>
<br />
<a href="www.baidu.com" @click.prevent
>纯prevent之后的链接 www.baidu.com</a
>
</div>
</body>
<script>
new Vue({
el: "#div1",
data: {
VueTest: "Hello World!",
},
methods: {},
});
var content = new Vue({
el: "#content",
data: {
id: "",
NextInfo: "",
},
methods: {
doc: function () {
this.id = event.currentTarget.id;
this.NextInfo += this.id + " ";
},
},
});
new Vue({
el: "#prevent",
data: {},
methods: {
locationFunc: function () {
alert("成功跳转");
},
},
});
</script>
</html>
本次章节就到此为止了,接下来就改进入Vue的条件语句学习了