vue修饰符

<template>
  <div>
    <!-- .stop 修饰符：阻止事件冒泡 -->
    <button @click="handleClick">普通按钮</button>
    <div @click="handleOuterClick">
      外层区域
      <button @click.stop="handleInnerClick">阻止冒泡的按钮</button>
    </div>

    <!-- .prevent 修饰符：阻止默认行为 -->
    <a href="https://example.com" @click.prevent="handleLinkClick">点击不会跳转的链接</a>

    <!-- .once 修饰符：事件只触发一次 -->
    <button @click.once="handleOnceClick">只触发一次的按钮</button>

    <!-- .capture 修饰符：在捕获阶段处理事件 -->
    <div @click.capture="handleCaptureClick">
      捕获阶段处理
      <button @click="handleButtonClick">按钮</button>
    </div>

    <!-- .self 修饰符：只有当事件是从该元素本身触发时才触发回调 -->
    <div @click.self="handleSelfClick">
      只有点击外层 div 时才会触发
      <button>按钮</button>
    </div>

    <!-- .keycode 或 .key 修饰符：通过按键代码或别名绑定键盘事件 -->
    <input @keyup.enter="handleEnterKey" placeholder="按下 Enter 键触发" />
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('普通按钮被点击了');
    },
    handleOuterClick() {
      console.log('外层区域被点击了');
    },
    handleInnerClick() {
      console.log('阻止冒泡的按钮被点击了');
    },
    handleLinkClick() {
      console.log('链接被点击了，但不会跳转');
    },
    handleOnceClick() {
      console.log('只触发一次的按钮被点击了');
    },
    handleCaptureClick() {
      console.log('捕获阶段处理事件');
    },
    handleButtonClick() {
      console.log('按钮被点击了');
    },
    handleSelfClick() {
      console.log('只有点击外层 div 时才会触发');
    },
    handleEnterKey() {
      console.log('Enter 键被按下');
    }
  }
};
</script>

解释说明

1. .stop：阻止事件冒泡。例如，点击 阻止冒泡的按钮 不会触发外层的点击事件。
2. .prevent：阻止默认行为。例如，点击链接不会跳转页面。
3. .once：事件只触发一次。例如，点击按钮后，该按钮的点击事件只会触发一次。
4. .capture：在捕获阶段处理事件。通常用于在事件传播到目标元素之前进行处理。
5. .self：只有当事件是从该元素本身触发时才触发回调。例如，点击外层 div 时触发，点击内部按钮时不触发。
6. .keycode 或 .key：通过按键代码或别名绑定键盘事件。例如，监听 Enter 键的按下事件。