Vue常用修饰符

v-model 实现原理

v-model 是一种语法糖，当使用 v-model="msg" 时，等价于 :msg="msg" @input='msg=𝑒𝑣𝑒𝑛𝑡′父组件使用:𝑚𝑠𝑔="𝑚𝑠𝑔"将属性传递给子组件，并监听𝑖𝑛𝑝𝑢𝑡事件。子组件使用𝑝𝑟𝑜𝑝𝑠的𝑣𝑎𝑙𝑢𝑒属性接收值，并使用

emit('input ', newValue) 来更新父组件的属性。

一、事件修饰符

　　1、.stop：阻止事件冒泡

　　2、.prevent：提交事件不再重新加载页面，可以用来阻止表单提交的默认行为

　　3、.once：点击事件只会触发一次

　　4、.native：使用时将被当成原生HTML标签看待

　　5、.sync：sync 修饰符也是一种语法糖，用于实现双向数据绑定，但它的实现方式与 v-model 有所不同。

当使用 :msg.sync="msg" 时，等价于 :msg="msg" @update:msg="msg = 𝑒𝑣𝑒𝑛𝑡"父组件使用:𝑚𝑠𝑔.𝑠𝑦𝑛𝑐将属性传递给子组件，并监听𝑢𝑝𝑑𝑎𝑡𝑒:𝑚𝑠𝑔事件。子组件使用
emit('update:msg', newValue) 来更新父组件的属性。
因为是在父组件更新值，所以就不是在子组件更新 prop 值了。

 

二、按键修饰符

　　1、@keyup：键盘抬起

　　2、@keydown：键盘按下

　　3、按键码：在键盘修饰符后面添加.xxx，用于监听按了哪个键

　　常用按键码：.enter，.tab，.delete，.esc，.up，.down，.space等。

三、表单修饰符

　　1、.lazy：在表单输入时不会马上显示在页面，而是等输入完成失去焦点时才会显示；

　　2、.trim：过滤表单输入时两边的空格；

　　3、.number：限制输入数字或将输入的数据转为数字

四、系统修饰键

...

五、鼠标按键修饰符

　　.left，.right，.middle