Vue常用的修饰符有哪些？有什么应用场景？-Vue面试指南

当前位置:　首页>> 技术小册>> Vue面试指南

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

- .prevent：阻止默认事件；
- .stop：阻止事件冒泡；
- .capture：添加事件监听器时使用事件捕获模式；
- .self：只有当事件是从事件源自身触发时才触发事件；
- .once：只触发一次；
- .passive：指示浏览器不要执行默认的滚动行为（提高性能）。
修饰符的应用场景有很多，下面展示几个常见的示例：

.prevent 阻止默认事件：
```
<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="name" />
    <button type="submit">Submit</button>
  </form>
</template>

.stop 阻止事件冒泡：
```
<template>
  <div @click="outer">
    <div @click.stop="inner">Inner Div</div>
  </div>
</template>

.once 只触发一次：
```
<template>
  <button @click.once="doSomething">Click Me</button>
</template>

.self 只有当事件是从事件源自身触发时才触发事件：
```
<template>
  <div @click.self="doSomething">
    <button>Click Me</button>
  </div>
</template>

.passive 指示浏览器不要执行默认的滚动行为（提高性能）：
```
<template>
  <div @scroll.passive="doSomething">
    
  </div>
</template>

该分类下的相关小册推荐：

Vue.js从入门到精通(四)

Vue源码完全解析

TypeScript和Vue从入门到精通(二)

vue项目构建基础入门与实战

Vue.js从入门到精通(二)

TypeScript和Vue从入门到精通(一)

TypeScript和Vue从入门到精通(五)

vuejs组件实例与底层原理精讲

Vue.js从入门到精通(三)

Vue原理与源码解析

移动端开发指南

Vue3技术解密