vue-修饰符

v-model修饰符

v-model提供了一些修饰符，用于改变其行为。

.lazy

将默认input事件变更数据修改为每次change后更新数据。

<input v-model.lazy="msg" />

.number

将用户输入的值交给parseFloat函数进行处理转换为数字，如果用户输入的数据无法被parseFloat处理，那么将返回原始值。
number修饰符会在输入框有type = 'number'时自动启动。

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

.trim

默认去除用户输入内容中两端的空格

<input v-model.trim="msg" />

事件修饰符

官网原文：在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。
为解决这一问题，Vue 为 v-on 提供了事件修饰符。

修饰符	例子	解释
.stop	<a @click.stop="doThis"></a>	阻止事件冒泡
.prevent	<form @submit.prevent="onSubmit"></form>	阻止表单提交的默认行为（刷新页面）
.self	<div @click.self="doThat">...</div>	所绑定监听器元素本身触发时才触发
.capture	<div @click.capture="doThis">...</div>	事件捕获阶段触发事件
.once	<a @click.once="doThis"></a>	事件处理程序在其绑定的组件生命周期内仅被调用一次
链式使用	<a @click.stop.prevent="doThat"></a>	阻止事件冒泡和阻止默认行为

按键修饰符

按键修饰符用来检查特定按键
只有key为Enter时调用submit

<input @keyup.enter="submit" />

可以直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符，但需要转为 kebab-case 形式。

Vue 为一些常用的按键提供了别名：

• .enter
• .tab
• .delete (捕获“Delete”和“Backspace”两个按键)
• .esc
• .space
• .up
• .down
• .left
• .right

鼠标按键修饰符

• .left
• .right
• .middle