Vue中常见指令修饰符的学习总结

v-on指令的修饰符

v-on指令用于定义事件，简写为“@”。

修饰符	描述
.prevent	阻止默认事件行为
.stop	阻止事件冒泡
.once	事件只触发一次
.capture	使用事件的捕获模式
.self	只有event.taget是当前操作元素时，才触发
.passive	事件的默认行为立即执行
.{keyCode |keyAlias}	从特定键触发时间事件时执行

修饰符写在事件定义后。

示例

<button @click.once="doThis"><button>

部分解释

.{keyCode |keyAlias}修饰符

当我们定义键盘事件时，想只点击某个键才触发事件时，可以使用该修饰符。

keyCode表示键的键值，keyAlias表示键的别名（如enter）。

vue常见按键别名

按键别名	按键
enter	回车
delete	“删除”或“退格”
esc	退出
space	空格
tab	制表键（特殊，必须配合keydown使用）
up	上
down	下
left	左
right	右

注：tab键按下会自动切换标签焦点，必须配合keydown事件使用

系统辅助键：ctrl，alt，shift，meta（也称wen）

1. 配合keyup使用时：按下修饰键的同时，再按其他键，松开其他键后，事件才触发。
2. 配合keydown使用时：正常触发。

自定义键别名

Vue.config.keyCodes.自定义别名=键码。

v-model指令修饰符

V-model指令用于双向绑定表单属性（一般为value属性）。

修饰符	描述
.number	接收数据为数字
.lazy	失去焦点后再接收数据
.trim	去除前后空格后接收数据

修饰符写在变量绑定后。

示例

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

部分解释

1. .number修饰符

   默认情况下，v-model绑定的变量接收输入框元素中的值默认为字符串类型，有时候传输数据到后端时，要求是数字类型，此时.number修饰符可将接受到的数据转换为数字类型。

2. .lazy修饰符

   默认情况下，v-model绑定的变量接收表单元素（如输入框）的值是实时的，即一修改就接受，有时不希望它那么敏感，可以使用.lazy修饰符，这样效率也高一些。

更多详情请查看官方api文档 https://v2.cn.vuejs.org/v2/api