v-on事件修饰符
常见 的v-on修饰符
v-on
提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下:
.stop
阻止冒泡。本质是调用 event.stopPropagation()。.prevent
阻止默认事件(默认行为)。本质是调用 event.preventDefault()。.capture
添加事件监听器时,使用捕获的方式(也就是说,事件采用捕获的方式,而不是采用冒泡的方式)。.self
只有当事件在该元素本身(比如不是子元素)触发时,才会触发回调。.once
事件只触发一次。.{keyCode | keyAlias}
只当事件是从侦听器绑定的元素本身触发时,才触发回调。.native
监听组件根元素的原生事件。
PS:一个事件,允许同时使用多个事件修饰符。
写法示范:
<!-- click事件 -->
<button v-on:click="doThis"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 阻止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为,没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
.stop
的举例
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
.father {
height: 300px;
width: 300px;
background: pink;
}
.child {
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div id="test">
<div class="father" @click="fatherClick">
<div class="child" @click="childClick">
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#test',
data: {},
methods: {
fatherClick: function () {
console.log("click father");
},
childClick: function () {
console.log("click child")
}
}
})
</script>
</body>
</html>
上方代码中,存在冒泡的现象,父标签中包含了一个子标签。当点击子标签时,父标签也会被触发。打印顺序是:
那么问题来了,如果我不想让子标签的点击事件冒泡到父亲,该怎么做呢?办法是:给子标签加一个事件修饰符.stop
,阻止冒泡。代码如下:
<div class="child" @click.stop="childClick">
阻止冒泡后,当点击子标签时,打印结果是:click child
.prevent
的举例1
比如说,超链接<a>
默认有跳转行为,那我可以通过事件修饰符.prevent
阻止这种跳转行为。
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
.father {
height: 300px;
width: 300px;
background: pink;
}
.child {
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div id="test">
<a v-bind="{href: url}" @click.prevent="linkClick">Link</a>
</div>
<script>
var vm = new Vue({
el: '#test',
data: {
url: "http://www.baidu.com"
},
methods: {
linkClick: function () {
console.log('click link');
}
}
})
</script>
</body>
</html>
上方代码中:
- 如果去掉
.prevent
,点击按钮后,既会打印log,又会跳转到百度页面。 - 现在加上了
.prevent
,就只会打印log,不会跳转到百度页面。