vue2 - 修饰符
2024-01-31 本文已影响0人
Max_Law
Vue.js 中的修饰符用来增强和定制绑定在 DOM 元素上的指令行为，特别是事件处理和表单输入。以下是一些 Vue 2.x 中常见的事件和 v-model 修饰符，以及它们的用途和例子：
Vue 事件修饰符
| 修饰符 | 功能描述 | 示例 |
|---|---|---|
.stop |
阻止事件继续向上冒泡传播 | <button @click.stop="handleClick">点击我</button> |
.prevent |
阻止事件的默认行为 | <form @submit.prevent="handleSubmit">...</form> |
.capture |
添加事件监听器时使用捕获阶段而非冒泡阶段 | <div @click.capture="handleClick">...</div> |
.self |
只当事件在元素自身（而不是子元素）触发时才触发回调 | <div @click.self="handleSelfClick">...</div> |
.once |
事件只会触发一次 | <button @click.once="doSomethingOnce">...</button> |
.passive |
告诉浏览器你不会调用 preventDefault()，优化滚动事件等 |
<div @scroll.passive="onScroll">...</div> |
v-model 修饰符
| 修饰符 | 功能描述 | 示例 |
|---|---|---|
.lazy |
延迟更新，仅在失去焦点时同步数据 | <input v-model.lazy="message" type="text"> |
.trim |
输入内容自动过滤首尾空白字符 | <input v-model.trim="message" type="text"> |
.number |
自动将用户输入转换为数字类型（Vue 2.1+） | <input v-model.number="age" type="text"> |
请注意，随着 Vue 版本的升级，可能会有更多的修饰符加入或原有修饰符的行为有所改变。对于 Vue 3.x，请查阅官方文档以获取最新信息。此外，Vue 还有其他非 v-model 和事件相关的修饰符，例如.sync用于组件 props 双向绑定，但在 Vue 3.x 中已不再推荐直接使用.sync，而是采用更明确的语法实现。
