『VUE』10. 事件修饰符（详细图文注释）

在Vue中，事件修饰符是以.开头的指令后缀，用于指出指令应当以特殊方式绑定。例如.prevent会调用event.preventDefault()，.stop会调用event.stopPropagation()。

以下是Vue中常用的事件修饰符：

• .stop：阻止事件冒泡。
• .prevent：阻止事件的默认行为。
• .capture：使用事件捕获模式。
• .self：只当事件在该元素本身触发时触发回调。
• .once：事件只触发一次。
• .passive：事件的默认行为立即执行，无需等待事件回调结束。

示例代码：

<template>
  <div>
    <!-- 阻止点击事件冒泡 -->
    <button @click.stop="onClick">点击我</button>
 
    <!-- 提交事件不再重载页面 -->
    <form @submit.prevent="onSubmit">
      <input type="submit" value="提交">
    </form>
 
    <!-- 只有在点击按钮本身时才触发事件 -->
    <div @click.self="onDivClick">
      <button @click="onButtonClick">点击我</button>
    </div>
 
    <!-- 键盘事件只触发一次 -->
    <input @keyup.enter.once="onEnter">
  </div>
</template>
 
<script>
export default {
  methods: {
    onClick() {
      console.log('Button clicked with event bubbling stopped.');
    },
    onSubmit() {
      console.log('Form submitted without page refresh.');
    },
    onDivClick() {
      console.log('Div clicked.');
    },
    onButtonClick() {
      console.log('Button clicked.');
    },
    onEnter() {
      console.log('Enter key pressed once.');
    }
  }
}
</script>

在这个例子中，我们展示了如何使用不同的事件修饰符来处理不同的事件行为。