AI生成--事件修饰符

事件修饰符是Vue.js框架中用来调整事件监听器行为的特殊指令。它们以 . 分隔在事件名后面，形成形如 @event.modifier 的语法。

常用的事件修饰符有以下几种：

1. .stop：阻止事件冒泡，即不再向父级元素传递事件。例如，在一个按钮上面使用该修饰符可以防止事件传播到按钮外部的其他元素。示例代码如下：

<!-- 阻止按钮点击事件冒泡 -->
<button @click.stop="myMethod">点我</button>

2. .prevent：阻止默认事件，即防止浏览器默认行为发生。例如，在一个表单的提交按钮上面使用该修饰符可以防止表单提交。示例代码如下：

<!-- 阻止表单提交 -->
<form @submit.prevent="myMethod">
  <button type="submit">提交</button>
</form>

3. .capture：捕获事件，即在从内向外的触发过程中首先触发该事件。例如，在一个嵌套的 div 元素中，将该修饰符加在内层元素的事件监听器上就可以优先触发该事件。示例代码如下：

<!-- 在内层 div 上优先触发事件 -->
<div @click.capture="myMethod">
  <div @click="myOtherMethod"></div>
</div>

4. .self：只有在事件目标自身上触发事件时才触发监听器。例如，在一个按钮的内部使用该修饰符可以确保只有在按钮上点击才会触发事件，而不是在按钮外部点击。示例代码如下：

<!-- 只在按钮自身上触发事件 -->
<button @click.self="myMethod">点我</button>

5. .once：只触发一次事件监听器，即监听器将会自动移除。例如，在添加一个临时的事件监听器时，可以使用该修饰符来确保在事件触发一次后立即移除监听器。示例代码如下：

<!-- 只触发一次事件监听器 -->
<button @click.once="myMethod">点我</button>

6. .passive：以被动方式监听滚动事件。当设置该修饰符时，表示该滚动事件监听器不会调用 preventDefault() 方法来阻止浏览器默认行为。因此在移动设备上使用该修饰符，可以提高页面的滚动性能。示例代码如下：

<!-- 以被动方式监听滚动事件 -->
<div @touchstart.passive="touchStartHandler"></div>