@click='handleClick'
@click='handleClick($event)'
handleClick(e){
// 这两种方法都可以拿到事件对象e，但是如果是handleClick()是拿不到e的
}
阻止事件冒泡 e.stopPropagation
阻止事件默认行为 e.preventDefault
return false;既可以阻止事件冒泡和事件默认行为
一、事件修饰符
@click.prevent 阻止事件默认行为
@click.stop 阻止事件冒泡
<div @click="buttonClick2">
<div @click.stop="buttonClick">
nice
<div>123</div>
</div>
</div>
buttonClick() {
alert(12);
},
buttonClick2(){
alert(34);
}
当我点击了123会弹出12，因为阻止了事件冒泡，所以不会弹出34，当我点击nice的也是只弹出12
@click.self 只要点击的元素和绑定事件的元素是同一个元素才会触发，通过冒泡上来的事件不触发，但是不阻止事件向上冒泡
<div @click="buttonClick2">
<div @click.self="buttonClick">
nice
<div>123</div>
</div>
</div>
buttonClick() {
alert(12);
},
buttonClick2(){
alert(34);
}
当我点击123 是不会弹出12，因为使用了self修饰符，但是继续向上冒泡，所以弹出34，当我点击了nice会弹出12，且向上冒泡弹出34
@click.once 事件只执行一次
@click.capture事件执行按捕获的规则触发
image.png
先打印outer 在打印inner，如果不加capture 则会按冒泡的机制 先打印inner，在打印outer
二、按键修饰符 enter、 tab 、delete 、 esc
点击按键时，方法才会执行
@keydown.enter 在按下回车键的时候才会执行
三、系统修饰符 ctrl、alt、shift、meta
同时按下两个键的时候事件才会被执行
@keydown.ctrl 同时按下keydown和ctrl两个键的时候事件才会被执行
四.鼠标按键修饰符
right、left 、middle
