30.Vue事件修饰符

在事件处理程序中调用 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>