标准答案
- 事件修饰符处理事件行为，例如 .stop 阻止冒泡，.prevent 阻止默认行为，.capture 使用捕获阶段，.once 只触发一次，.self 只在事件目标是当前元素时触发。
- 按键修饰符处理键盘事件，例如 .enter、.esc、.tab，也可以组合 .ctrl、.shift、.alt、.meta。
- 表单修饰符主要配合 v-model 使用。.trim 去掉首尾空白，.number 尝试把输入转成数字，.lazy 从 input 事件改为 change 事件同步。
- 修饰符适合表达简单、稳定、和 DOM 事件强相关的逻辑。复杂判断仍然应该放进方法或组合式函数。
- 修饰符的顺序会影响生成代码，例如 @click.prevent.self 和 @click.self.prevent 的行为边界不同。
题目解析
修饰符的价值是把通用事件样板逻辑从方法里拿出来。模板能直接看出这个事件是否阻止默认行为、是否阻止冒泡、是否只响应某个按键。
.number 不是强类型保障。空字符串、非法数字、输入中间态都要按业务继续处理。
键盘交互不要只考虑 Enter。弹窗关闭、搜索提交、表单可访问性通常还要考虑 Esc、Tab 和焦点顺序。
代码示例
这个例子展示事件、按键和表单修饰符在搜索表单里的常见用法。
Vue
<template>
<form @submit.prevent="submitSearch">
<input
v-model.trim="keyword"
type="search"
@keydown.enter.prevent="submitSearch"
@keydown.esc="keyword = ''"
>
<input v-model.number="pageSize" type="number">
<button type="button" @click.stop="openHelp">
帮助
</button>
</form>
</template>常见误区
- 把 .stop 滥用在很多层级，导致父组件或外层交互无法收到事件。
- 认为 .number 一定返回 number。输入为空或无法转换时仍需要业务兜底。
- 复杂业务判断全部塞进模板修饰符和表达式，降低可读性。