Vue修饰符的使用

在 Vue.js 中，修饰符（modifiers）是一种特殊的后缀，用于指令以特殊方式修改指令的行为。修饰符通过在指令名称后面添加点（.）及修饰符名称来表示。Vue 提供了一些常用的修饰符，帮助开发者处理事件、绑定、表单输入等。以下是一些常见的修饰符及其用法。

事件修饰符

`.stop`

阻止事件的传播。

<button @click.stop="handleClick">点击我</button>

`.prevent`

阻止默认事件的发生。

<form @submit.prevent="handleSubmit">提交</form>

`.capture`

使用事件捕获模式。

<div @click.capture="handleClick">捕获模式</div>

`.self`

只当事件是从当前元素触发时触发处理函数。

<div @click.self="handleClick">点击我</div>

`.once`

只触发一次事件处理器。

<button @click.once="handleClick">点击一次</button>

`.passive`

提升滚动性能，防止默认行为。

<div @scroll.passive="handleScroll">滚动</div>

键修饰符

用于监听键盘事件，可以指定特定键或键组合。

基本键修饰符

<input @keyup.enter="handleEnter">
<input @keyup.esc="handleEsc">

组合键修饰符

<input @keyup.ctrl.enter="handleCtrlEnter">
<input @keyup.shift="handleShift">

自动转换键名

Vue 会自动识别常见的键名，例如：enter、esc、tab 等。

鼠标按钮修饰符

用于监听鼠标事件，可以指定特定的鼠标按钮。

<button @mousedown.left="handleLeftClick">左键点击</button>
<button @mousedown.right="handleRightClick">右键点击</button>
<button @mousedown.middle="handleMiddleClick">中键点击</button>

表单修饰符

`.lazy`

在 v-model 指令中，lazy 修饰符用于在 change 事件后同步输入值，而不是在 input 事件后同步。

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

`.number`

在 v-model 指令中，将输入值自动转换为数字。

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

`.trim`

在 v-model 指令中，自动过滤输入的首尾空格。

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

自定义指令中的修饰符

在自定义指令中，可以通过 binding.modifiers 访问修饰符。

Vue.directive('focus', {inserted: function (el, binding) {if (binding.modifiers.lazy) {// 具有 .lazy 修饰符的特定行为} else {el.focus();}}
});

综合示例

以下是一个包含各种修饰符的综合示例：

<template><div><form @submit.prevent="handleSubmit"><input v-model.lazy.trim="username" placeholder="用户名"><input v-model.number="age" placeholder="年龄" type="number"><button type="submit">提交</button></form><button @click.once="handleClick">点击一次</button><input @keyup.enter="handleEnter" placeholder="按 Enter 键"></div>
</template><script>
export default {data() {return {username: '',age: null};},methods: {handleSubmit() {console.log('提交表单', this.username, this.age);},handleClick() {console.log('按钮被点击了一次');},handleEnter() {console.log('按下 Enter 键');}}
};
</script>