Vue中常见的修饰符有哪些及怎么用

这篇文章主要介绍了Vue中常见的修饰符有哪些及怎么用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue中常见的修饰符有哪些及怎么用文章都会有所收获，下面我们一起来看看吧。

目前成都创新互联公司已为数千家的企业提供了网站建设、域名、虚拟空间、网站运营、企业网站设计、嵩县网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

一、修饰符是什么

在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。

vue中修饰符分为以下五种：

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

二、常见的修饰符

2.1 表单修饰符

在我们填写表单的时候用得最多的是input标签，指令用得最多的是v-model

关于表单的修饰符有如下：

lazy
trim
number

1. lazy

默认情况下，v-model 会在每次 input 事件后更新数据。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：


{{value}}

2. trim

如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：

3. number

如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：

2.2 事件修饰符

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

stop
prevent
self
once
capture
passive
native

1. stop

阻止了事件冒泡，相当于调用了event.stopPropagation方法，单击事件将停止传递

ok

//只输出1

2. prevent

阻止了事件的默认行为，相当于调用了event.preventDefault方法，提交事件将不再重新加载页面

3. self

仅当 event.target 是元素本身时才会触发事件处理器，例如：事件处理器不来自子元素

...

使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用 @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

4. once

绑定了事件以后只能触发一次，第二次就不会触发

ok

5. capture

添加事件监听器时，使用 capture 捕获模式，例如：指向内部元素的事件，在被内部元素处理前，先被外部处理。使事件触发从包含这个元素的顶层开始往下触发


    obj1

    obj2

    obj3

    obj4

6. passive

在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符。

滚动事件的默认行为 (scrolling) 将立即发生而非等待 onScroll 完成，以防其中包含 event.preventDefault()

.passive 修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。

7. native

让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件

2.3 鼠标按钮修饰符

鼠标按钮修饰符针对的就是左键、右键、中键点击，有如下：

2.4 键盘修饰符

键盘修饰符是用来修饰键盘事件（onkeyup，onkeydown）的，有如下：

keyCode存在很多，但vue为我们提供了别名，分为以下两种：

2.5 v-bind修饰符

1. async

2. props

3. camel

三、应用场景

根据每一个修饰符的功能，我们可以得到以下修饰符的应用场景：

关于“Vue中常见的修饰符有哪些及怎么用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue中常见的修饰符有哪些及怎么用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。

重庆分公司，新征程启航

Vue中常见的修饰符有哪些及怎么用

一、修饰符是什么

二、常见的修饰符

2.1 表单修饰符

1. lazy

2. trim

3. number

2.2 事件修饰符

1. stop

2. prevent

3. self

4. once

5. capture

6. passive

7. native

2.3 鼠标按钮修饰符

2.4 键盘修饰符

2.5 v-bind修饰符

1. async

2. props

3. camel

三、应用场景

其他资讯