什么是.prevent事件修饰符？

在Vue中，事件修饰符是指在事件处理函数后面添加的特殊标记，用于修改事件的行为。.prevent事件修饰符是其中之一，它的作用是阻止事件的默认行为。通常情况下，当用户触发某些事件时，浏览器会执行默认的行为，例如点击链接会跳转到指定页面，提交表单会刷新页面等。使用.prevent修饰符可以阻止这些默认行为的发生。

使用案例

<!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修饰符也可以阻止默认的键盘行为，例如阻止回车键触发表单提交或者阻止空格键滚动页面。