什么是.prevent事件修饰符？
在Vue中，事件修饰符是指在事件处理函数后面添加的特殊标记，用于修改事件的行为。.prevent事件修饰符是其中之一，它的作用是阻止事件的默认行为。通常情况下，当用户触发某些事件时，浏览器会执行默认的行为，例如点击链接会跳转到指定页面，提交表单会刷新页面等。使用.prevent修饰符可以阻止这些默认行为的发生。
使用案例
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Event Modifier Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<a href="http://www.baidu.com" v-on:click.prevent="myclick">Click me</a>
</div>
<script>
new Vue({
el: '#app',
methods: {
myclick() {
alert('按钮被点击');
}
}
});
</script>
</body>
</html>效果：
运行后，点击按钮后，只会弹窗提示'按钮被点击' ，但是a标签并不会将页面跳转到百度页面。
常见使用场景
.prevent事件修饰符在Vue中的常见使用场景包括：
- 防止表单默认提交行为 当用户提交表单时，通常会触发浏览器默认的提交行为，导致页面刷新。使用.prevent修饰符可以阻止这种默认行为，从而在不刷新页面的情况下进行表单提交，同时可以在Vue的事件处理函数中处理表单数据，进行自定义的处理逻辑。
- 防止链接跳转
- 防止点击事件冒泡
- 防止键盘事件默认行为 在处理键盘事件时，.prevent修饰符也可以阻止默认的键盘行为，例如阻止回车键触发表单提交或者阻止空格键滚动页面。
