【前端知识之Vue】Vue常用的修饰符

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍怎么缓存当前组件。

---

一、Vue的修饰符是什么

Vue中的修饰符分为以下五种：

• 表单修饰符；
• 事件修饰符；
• 鼠标按键修饰符；
• 键值修饰符；
• v-bind修饰符。

二、修饰符的作用

1、表单修饰符

修饰符	作用	使用
lazy	填完信息，光标离开标签的时候，才会将值赋予给value	<input type="text" v-model.lazy="value">
trim	自动过滤用户输入的首空格字符，中间的空格不会过滤	<input type="text" v-model.trim="value">
number	自动将用户输入的值转为数值类型，如果不能被parseFloat解析，会返回原来的值	<input v-model.number="age" type="number">

2、事件修饰符

修饰符	作用	使用
stop	阻止了事件冒泡 ，相当于调用了event.stopPropagation	<div @click="shout(2)"> <button @click.stop="shout(1)">ok</button> </div>//只输出1
prevent	阻止了事件的默认行为，相当于调用了event.preventDefault</