vue $event

<template>
  <div>
    <!-- 使用 $event 传递原始事件对象 -->
    <button @click="handleClick($event)">点击我</button>

    <!-- 直接在模板中使用 $event 的值 -->
    <input @keyup="handleKeyup($event)" placeholder="按下键盘">

    <!-- 简化写法，直接在模板中使用 $event 的值 -->
    <input @keyup.enter="logKey($event)" placeholder="按下回车键">
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      // event 是原生的 DOM 事件对象
      console.log('按钮被点击了', event);
    },

    handleKeyup(event) {
      // event 是原生的 DOM 事件对象
      console.log('按键:', event.key);
    },

    logKey(event) {
      // 当用户按下回车键时触发
      console.log('回车键被按下', event);
    }
  }
};
</script>

解释说明：

• $event 是 Vue 中用于获取原生 DOM 事件对象的关键字。它允许你在事件处理函数中访问触发事件的详细信息。
• 在 @click="handleClick($event)" 中，$event 被传递给 handleClick 方法，这样你可以在方法内部访问到点击事件的详细信息。
• 你也可以直接在模板中使用 $event，例如在 @keyup="handleKeyup($event)" 中，$event 会自动传递给 handleKeyup 方法。
• .enter 是修饰符，表示只在按下回车键时触发事件。