vue事件修饰符之.prevent

.prevent 事件修饰符只是阻止默认事件，不会自动触发任何事件处理函数。因此，在使用 .prevent 事件修饰符时，需要自己编写相应的事件处理函数来处理事件。

例如，在上面的例子中，我们通过在表单上绑定 @submit.prevent="handleSubmit" 来阻止表单提交事件的默认行为，并在 Vue 实例中定义了 handleSubmit 方法来处理表单提交事件。

需要注意的是，如果在使用 .prevent 事件修饰符时没有绑定相应的事件处理函数，那么事件就会被完全阻止，导致该元素无法执行任何操作。因此，在使用 .prevent 事件修饰符时一定要记得绑定相应的事件处理函数。

.prevent事件修饰符的使用：

1. 防止链接跳转：

<template>
  <a href="https://www.example.com" @click.prevent>
    进入网站
  </a>
</template>

在上述代码中，我们使用 .prevent 事件修饰符来阻止 a 元素的默认点击行为导致页面跳转。

1. 防止表单提交：

<template>
  <form @submit.prevent>
    <label for="username">用户名：</label>
    <input type="text" id="username" v-model="username">
    <button type="submit">登录</button>
  </form>
</template>

在上述代码中，我们使用 .prevent 事件修饰符来阻止表单的默认提交行为，从而在不跳转页面的情况下处理表单数据。

1. 防止滚动事件：

<template>
  <div @scroll.prevent>
    <!-- content -->
  </div>
</template>

在上述代码中，我们使用 .prevent 事件修饰符来阻止 div 元素的默认滚动行为，从而禁止用户通过滚动该元素来改变页面的布局。

1. 防止键盘事件：

<template>
  <input type="text" @keydown.prevent>
</template>

在上述代码中，我们使用 .prevent 事件修饰符来阻止 input 元素的默认按键行为，从而禁止用户通过按下某些键来改变输入框中的内容。

总之，在需要阻止元素默认事件行为的场景中，都可以使用 .prevent 事件修饰符来实现。

详细讲解  见视频链接：Vue3.0-14.指令 - 事件修饰符_哔哩哔哩_bilibili