Vue的常用修饰符

Vue修饰符是以点（.）开头的特殊后缀，用于指示指令应以特定方式绑定或触发。它们通常用于简化常见操作（如事件处理、表单输入绑定等），避免在方法中编写冗余逻辑。

常用修饰符

• .lazy：输入框失焦时才会更新v-model的值
• .trim：讲v-model绑定的值首位空格给去掉.number：将v-medol绑定的值转数字
• .stop：阻止事件冒泡
• .enter 按键修饰符
• .capture：事件的捕获
• .self：点击事件绑定本身才触发
• .once：事件只触发一次
• .prevent：阻止默认事件
• .native：绑定事件在自定义组件上时，确保能执行.left、.middle、.right：鼠标左中右键的触发 - -
• .passive：相当于给移动端滚动事件加一个
• .lazycamel：确保变量名会被识别成驼峰命名
• .sync：简化子修改父值的步骤

示例

<input v-model.trim="username" placeholder="自动去除空格">

<button @click.stop="handleClick">点击不冒泡</button>

<input @keyup.enter="submit" placeholder="按Enter提交">

<child-component :title.sync="pageTitle"></child-component>