Vue2中的事件修饰符 用于处理DOM事件的触发方式

一、.stop

1.功能：

阻止事件冒泡，即停止事件向上传播到父元素。

2.代码演示：

<div @click="parentClick">
	<button @click.stop="childClick">Click me</button>
</div>

二、.prevent

1.功能：

阻止默认行为，例如阻止表单提交或链接跳转。

2.代码演示：

<form @submit.prevent="submitForm">
	<!-- form content -->
</form>

类似于：

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
  // 在这里添加你的代码，例如跳转到其他页面或执行其他操作
});

三、.capture

1.功能：

使用事件捕获模式，而不是冒泡模式。

2.代码演示：

<div @click.capture="outerClick">
  <button @click="innerClick">Click me</button>
</div>

四、.self

1.功能：

只有在事件是从 监听器绑定 的元素本身触发时才触发回调。

2.代码演示：

<div @click.self="selfClick">
  <button @click="otherClick">Click me</button>
</div>

五、.once

1.功能：

事件只触发一次，之后不再触发。

2.代码演示：

<button @click.once="oneTimeClick">Click me</button>

六、.passive

1.功能：

滚动事件的监听器将立即被调用，而不会等待onScroll完成。这对于性能优化很有用。

2.代码演示：

<div @scroll.passive="handleScroll">
  <!-- scrollable content -->
</div>

七、.native

1.功能：

监听原生事件，而不是组件内部使用的事件系统。

2.代码演示：

<my-component @click.native="nativeClick"></my-component>

八、.left, .right, .middle

1.功能：

鼠标按钮事件修饰符，分别表示左键、右键和中键点击。

2.代码演示：

<button @click.left="leftClick">Left Click</button>
<button @click.right="rightClick">Right Click</button>
<button @click.middle="middleClick">Middle Click</button>

以上事件修饰符 可以与 常规的事件监听器 一起使用，以实现更灵活的事件处理。