修饰符 | 功能 |
---|---|
.stop | 阻止冒泡 |
.prevent | 阻止默认事件 |
.capture | 添加事件侦听器时使用事件捕获模式 |
.self | 只有事件在该元素本身触发时触发回调(别人影响不了它,它也影响不了别人) |
.once | 事件只触发一次 |
.stop
由于vue界面的特殊性,组件一般是一层层叠加起来的,所以触发中心事件时,周边事件也会随之触发,即冒泡。例如,对于下面的vue结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.inner{
height: 150px;
background-color: aquamarine
}
</style>
</head>
<body>
<div id="app">
<div class="inner" @click="div1Handler">
<input type="button" value="button" @click="btnHandler">
</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'vue test'
},
methods:{
div1Handler(){
console.log('innner div event')
},
btnHandler(){
console.log('btn button event')
}
}
})
</script>
</body>
</html>
界面呈现为:
当我们点击中心的button按钮时,触发的事件为:
可以看到点击了按钮的同时,背景区域的事件也被触发了。为了避免这种情况,可以使用.stop修饰符。将下面的代码:
<input type="button" value="button" @click="btnHandler">
修改为:
<input type="button" value="button" @click.stop="btnHandler">
再次点击按钮后,显示触发的事件为:
.prevent
下面这个.prevent可以阻止页面跳转:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.inner{
height: 150px;
background-color: aquamarine
}
</style>
</head>
<body>
<div id="app">
<a href="http://www.baidu.com" @click.prevent="linkclick">baidu</a>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'vue test'
},
methods:{
linkclick(){
console.log('link event')
}
}
})
</script>
</body>
</html>
本来点击链接后会跳转到百度的页面,但是这里使用.prevent修饰符后就不会跳转了。
.capture
还是上面那个.stop部分的代码修改一下:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.inner{
height: 150px;
background-color: aquamarine
}
</style>
</head>
<body>
<div id="app">
<div class="inner" @click.capture="div1Handler">
<input type="button" value="button" @click="btnHandler">
</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'vue test'
},
methods:{
div1Handler(){
console.log('innner div event')
},
btnHandler(){
console.log('btn button event')
}
}
})
</script>
</body>
</html>
显示的界面同样为:
这次点击按钮之后,会触发绿色背景板的事件div1Handler再触发按钮事件btnHandler。
.self
还是同样一段代码,在click之后添加修饰符.self此时点击按钮和背景板时只有自己各自的事件会响应。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.inner{
height: 150px;
background-color: aquamarine
}
</style>
</head>
<body>
<div id="app">
<div class="inner" @click.self="div1Handler">
<input type="button" value="button" @click.self="btnHandler">
</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'vue test'
},
methods:{
div1Handler(){
console.log('innner div event')
},
btnHandler(){
console.log('btn button event')
}
}
})
</script>
</body>
</html>
.once
顾名思义,修饰符对应的事件只会触发一次:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.inner{
height: 150px;
background-color: aquamarine
}
</style>
</head>
<body>
<div id="app">
<div class="inner" @click.self="div1Handler">
<input type="button" value="button" @click.once="btnHandler">
</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'vue test'
},
methods:{
div1Handler(){
console.log('innner div event')
},
btnHandler(){
console.log('btn button event')
}
}
})
</script>
</body>
</html>