vue2-常用的修饰符有哪些应用场景？

最新推荐文章于 2024-01-23 19:40:18 发布

fakerlove

最新推荐文章于 2024-01-23 19:40:18 发布

阅读量290

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/fakerlove/article/details/132119187

版权

本文介绍了Vue2中的修饰符，包括表单修饰符（lazy、trim、number）、事件修饰符（stop、prevent、self等）、鼠标按键修饰符、键值修饰符和v-bind修饰符。详细阐述了每个修饰符的作用，如lazy修饰符实现延迟更新，stop修饰符阻止事件冒泡，prevent修饰符阻止默认行为，以及如何在实际开发中应用这些修饰符。

摘要由CSDN通过智能技术生成

1、修饰符是什么？
在程序的世界里，修饰符是用于限定类型以及类型成员的声明的一种符号。
在vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些重复的事情，而能有更多的精力专注于程序的逻辑处理。
vue中的修饰符主要分为以下五种。
表单修饰符
事件修饰符
鼠标按键修饰符
键值修饰符
v-bind修饰符

2、修饰符的作用
表单修饰符
在我们填写表单的时候用的最多的就是input标签，指令最多的就是v-model
关于表单的修饰符有如下：
lazy、trim、number
lazy：在填完信息，光标离开标签的时候，才会将值赋给value，也就是在change事件之后再进行信息同步。
在这里插入图片描述
trim：自动过滤用户输入的首空格字符，而中间的空格不会过滤。

number：自动将用户的输入转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值。

事件修饰符：就是对事件捕获以及目标进行了处理。有如下修饰符。
stop