@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