- 停止事件冒泡
举个栗子:两个嵌套的 div,分别绑定了不同的事件,点击小的 div时,如果不停止事件冒泡,会继续触发外面的 div 绑定事件。 @click.stop 停止事件冒泡。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>停止事件冒泡</title>
</head>
<body>
<div id="example">
<div style="width: 200px;height: 200px;background: red" @click="test1">
<div style="width: 100px;height: 100px;background: blue" @click.stop="test2"></div>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#example',
data: {
},
methods: {
test1 () {
alert('out')
},
test2 () {
alert('inner')
}
}
})
</script>
</body>
</html>
- 阻止事件默认行为
常用的阻止 a标签的默认事件,在 a 标签上绑定了自定义的事件,使用 @click.prevent 来阻止默认行为。
<a href="http://www.baidu.com" @click.prevent="test">百度一下</a>
- 按键修饰符
这个比较常用的是,监听键盘上的回车键,比如用于填完登录信息时,敲击键盘上的回车,进行登录操作。@keyup.13 和 @keyup.enter 是同一个意思,13 就代表 enter 键的 code码。
<input type="text" @keyup.13="test1">
<input type="text" @keyup.enter="test2">