Vue.js 初步入门
修饰符介绍
.stop：阻止冒泡.prevent：阻止默认事件.capture：增加事件监听器时，使用事件捕获模式.self：事件在本身触发时，触发回调.once：事件只触发一次
修饰符详解
1. stop
在原生js里，如果不加以阻止，会有冒泡机制对事件进行冒泡回调，如下图，当我们点击子元素child时，不但子元素的click事件会触发，同时父元素parents的事件也会触发,这就是所谓的事件冒泡机制。
<style type="text/css">
#parents{
width:200px;
height: 200px;
background-color: #FF69B4;
}
#child{
width:100px;
height: 100px;
background-color: aqua;
}
</style>
<body>
<div id="container">
<div id="parents" @click="hadlePclick">
parents
<div id="child" @click="hadleCclick">
child
</div>
</div>
</div>
</body>
<script type="text/javascript">
// 新建一个vue对象,里面需要传入一个“选项对象”
// 也可以理解成json对象
new Vue({
//el是element的缩写,传入vue依赖的元素
el:"#container",
//数据与,所有与UI交互的数据都可以放在这儿
data:{
msg:"hello vue.js"
},
//方法块,用来放置方法
methods:{
//这是es6写法
hadlePclick(){
console.info("parents");
},
hadleCclick(){
console.info("child");
}
}
});
</script>
</html>
用原生js方法，我们可以在事件末尾调用event.stopPropagation();来阻止事件的冒泡。
vue中，给我们提供了例外一种阻止事件冒泡的方案，那就是事件修饰符.stop，只要在想要阻止冒泡的事件绑定符后面加上事件修饰符，便可以阻止冒泡，如@click.stop，效果如图所示：
<div id="child" @click.stop="hadleCclick">
child
</div>
2. prevent
有些html标签有自己的默认事件，比如<a>标签，只要你点击了，就会跳转或者刷新，以至于我们整个页面上自己所填写的数据都会被刷新掉。以往的js原生办法是修改a标签的属性href="javascript:void(0);"，这样，整个页面的数据就不会被刷新掉。
<a href="javascript:void(0);">这是a标签</a>
在vue里提供了.prevent事件修饰符，来阻止默认事件的发生：
<input type="text" />
<a href="" @click.prevent="hadleAClick">这是a标签</a>
hadleAClick(){
console.info("<a>点击了");
}
3. capture
众所周知，事件的捕获过程之后就是事件的冒泡过程，如图所示：
而.capture修饰符就是用事件捕获模式来增加事件监听器的：
<div id="parents" @click.capture="hadlePclick">
parents
<div id="child" @click="hadleCclick">
child
</div>
</div>
它正好和冒泡的事件发生顺序相反。
4. self
这个修饰符，只会触发他自身的回调函数（事件），只要用这个修饰符修饰过的子类元素事件都只会发生自己的事件，不会向上冒泡：
<div id="parents" @click.self="hadlePclick">
parents
<div id="child" @click="hadleCclick">
child
</div>
</div>
5. once
.once修饰符修饰过的事件之会发生一次，再点击就不会触发。
<a href="" @click.once="hadleAClick">这是a标签</a>
第一次点击会输出语句，之后再点击就不会执行它的hadleAClick点击事件。
Tip
- 事件修饰符可以进行串联修饰，不用担心不能同时使用，如
@click.prevent.once="".stop和.self都是阻止冒泡事件的发生，区别在于一个阻止属于“我”的事件向上冒泡，另一个是阻止“我”的子元素来被动冒泡我。
扫一扫
4960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
