vue的指令修饰符

Vue.js 的指令修饰符（Modifiers）是特殊的后缀，用于指示一个指令应该以特殊方式绑定。它们提供了对指令行为的微调，而不需要记住或使用复杂的表达式。修饰符是以半角句号 . 指明的特殊后缀，用于表示指令应该以特定方式绑定。Vue 提供了多种内置指令，如 v-bind、v-model、v-on 等，这些指令都可以使用修饰符来扩展其功能。

以下是一些常见的 Vue 指令修饰符示例：

1. .prevent 修饰符（常用于 v-on） // 简写@

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()。这常用于阻止表单提交的默认行为，或阻止链接的默认跳转行为。

<form v-on:submit.prevent="onSubmit">...</form>  
<a v-on:click.prevent="doSomething">...</a>

2. .stop 修饰符

.stop 修饰符告诉 v-on 指令调用 event.stopPropagation()。这用于阻止事件继续冒泡。

<div v-on:click="doThis">...</div>  
<button v-on:click.stop="doThat">...</button>

3. .capture 修饰符

.capture 修饰符添加事件监听器时使用事件捕获模式，即事件首先在包含该元素的文档上被捕获，然后沿着 DOM 树向下传播，直到它到达目标元素。

<div v-on:click.capture="doThis">...</div>

4. .self 修饰符

.self 修饰符只当事件在该元素本身（比如不是子元素）触发时触发回调。

<div v-on:click.self="doThat">...</div>

5. .once 修饰符

.once 修饰符表示事件只会被触发一次。

<button v-on:click.once="doThis"></button>

6. .passive 修饰符

.passive 修饰符用于提高移动端页面滚动的性能。{ passive: true } 选项告诉浏览器该事件监听器永远不会调用 preventDefault()。

<div v-on:scroll.passive="onScroll">...</div>

7. .number 修饰符（常用于 v-model）

.number 修饰符用于 v-model，尝试将用户的输入转换为数值类型。如果转换失败，则返回原始的值。

<input v-model.number="age" type="number">

8. .trim 修饰符（常用于 v-model）

.trim 修饰符用于 v-model，自动过滤用户输入的首尾空白字符。

<input v-model.trim="message">

内置指令 | Vue.js (vuejs.org)