面试最常问的13种Vue修饰符

Vue修饰符是Vue提供的一组用于监听DOM事件、操作DOM的一些特殊语法。在Vue面试中，Vue修饰符是一个经常被问到的知识点。下面是关于“面试最常问的13种Vue修饰符”的完整攻略：

1. .prevent 修饰符

使用 .prevent 修饰符可以阻止元素默认事件的触发。例如，在form表单中，当用户点击提交按钮时，页面会自动刷新。我们可以使用 .prevent 修饰符来阻止这个默认事件，从而使得页面不会刷新。

<template>
  <form @submit.prevent="onSubmit">
    <input type="text">
    <button type="submit">提交</button>  
  </form>
</template>

<script>
export default {
  methods: {
    onSubmit() {
      // 处理表单提交逻辑
    }
  }
}
</script>

在上面的代码中，我们使用 .prevent 修饰符来阻止 form 表单的默认事件。

2. .stop 修饰符

使用 .stop 修饰符可以停止事件冒泡。例如，当一个按钮嵌套在一个父元素内部时，点击按钮时会同时触发父元素和按钮的 click 事件。我们可以使用 .stop 修饰符来停止 click 事件在父元素中的传播。

<template>
  <div @click="handleClick">
    <button @click.stop="handleClickButton">点击</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log("父元素的点击事件");
    },
    handleClickButton() {
      console.log("按钮的点击事件");
    }
  }
}
</script>

在上面的代码中，当点击按钮时，只会触发按钮上的点击事件，不会触发父元素的点击事件。

继续完整讲解剩余的Vue修饰符，请见我的博客文章：面试最常问的13种Vue修饰符完整攻略