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>