在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的操作。Vue 中提供了事件修饰符。
1、.stop
2、.prevent
3、.capture
4、.self
5、.once
用法：在＠绑定的事件后加小圆点“．”，再跟一个后缀来使用修饰符。
<!-- 阻止事件冒泡 -->
<div @click.stop="handle"> clikcMe </div>
<!-- 阻止默认行为 -->
<div @click.prevent="handle"> clikcMe </div>
<!-- 使用多个修饰符 -->
<div @click.stop.prevent="handle"> clikcMe </div>
<!-- 添加事件侦听时使用事件捕获模式 -->
<div @click.capture="handle"> clikcMe </div>
<!-- 只当事件在该元素本身（而不是子元素） 触发时触发回调，也可以实现stop效果 -->
<div @click.self="handle"> clikcMe </div>
<!-- 只触发一次，组件同样适用 -->
<div @click.once=” handle ”> clikcMe </div>
<!-- 键盘code使用,当按下某个键时触发 -->
<input type="text" @keyup.13="submit" />
除了keycode外，还可以使用快捷键名称，如下：
1、.enter
2、.tab
3、.delete(删除和退格键)
4、.esc
5、.space
6、.up
7、.down
8、.left
9、.right
按键修饰符还可以组合使用，或和鼠标一起配合使用：
1、.ctrl
2、.alt
3、.shift
4、.meta （mac是command、window是窗口键）
例如：
<!-- shfit + S -->
<input type="text" @keyup.shift.83="handle" />
<!-- ctrl + ctrl -->
<input type="text" @keyup.ctrl="handle" />
案例：
<template>
<div>
<div @click.self="parentClick" style="border:1px solid red;">
<div @click.stop="subClick" style="border:1px solid yellow; width: 50px">点击</div>
<div @click.stop.prevent="subClick">点击</div>
</div>
<div @click.once="subClick">只执行一次事件</div>
</div>
</template>
<script>
export default {
data(){
return {
}
},
methods: {
parentClick(){
alert('parent click');
},
subClick(){
alert('sub click');
}
}
}
</script>
