一、.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>