监听 DOM 事件

通过 v-on（简写@）监视事件，并执行自定义操作。 可以直接在后面跟上 JS 语句（内联处理）或者调用方法事件处理。

事件参数

在 Vue 中，可以通过 $event 拿到 DOM 事件对象：

<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

function warn(message, event) {
  // 这里可以访问原生事件
  if (event) {
    event.preventDefault()//阻止事件默认行为，可以被指令的事件修饰符替代
  }
  alert(message)
}

事件修饰符

1. .stop：阻止事件冒泡，防止事件继续向上层元素传播。
2. .prevent：阻止事件的默认行为（阻止页面刷新或跳转），例如阻止表单的默认提交行为。
3. .self：仅当事件是在元素本身（而不是子元素）触发时触发事件处理器。
4. .capture：使用捕获模式来监听一个事件。在捕获模式下，事件处理程序会首先被调用，然后才会调用子元素的处理程序。
5. .once：事件处理器只会被调用一次。在之后的相同事件上，事件处理器将不再被触发。
6. .passive：标记事件处理器为被动，这意味着它不会阻止事件的默认行为。在某些情况下，这可以提高滚动和触摸事件的性能（可能滚动事件被阻止，这样可以提高触屏设备性能）。注意，此修饰符需要浏览器的支持，因为并非所有浏览器都支持 passive 选项。 调用顺序@click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

按键修饰符

<input @keyup.page-down="onPageDown" />

当 page_down 被按下时处理。

• 链式写法可识别多个按键同时按下 @keyup.alt.enter
• 因为是修饰符，所以可以修饰其他 DOM 事件 @click.ctrl常用按键具有别名，例如 .delete (捕获“Delete”和“Backspace”两个按键)
• 注意按键修饰符默认只能够用于可聚焦元素，如果想要在其他元素上使用需要添加 tabindex 状态。

<template>
    <div class="testing" @keyup.enter="changeIsShow()" tabindex="0">
        <h2 v-if="isShow">hello</h2>
    </div>
</template>

<script setup lang='ts' name='test'>
import { ref, reactive} from 'vue'
let isShow = ref(false)
function changeIsShow(){
    console.log('change')
    isShow.value = !isShow.value
}
</script>
<style scoped>
.testing {
    width: 100px;
    height: 100px ;
}
</style>

常规按键和系统按键的区别

系统按键修饰符（如 .ctrl、.shift 等，用于组合键）与常规按键（注意这里加 . 但不是一个修饰符，而是针对这个按键的事件监听器）（如 .enter、.esc 等）在行为上有所不同。

• 系统按键修饰符会检测在按下的同时另一个键是否被按下，松开则反之

精准控制触发按键

使用 .exact 修饰符

<!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>

鼠标按键修饰符

• .left
• .right
• .middle