What are modifiers in Vue? Summary of common modifiers

This article will give you a brief understanding of the modifiers in Vue, and summarize some common modifiers and writing methods. I hope it will be helpful to everyone.

1. What are modifiers

In Vue, modifiers handle many ## The details of #DOM events mean that we no longer need to spend a lot of time dealing with these troublesome things, but can have more energy to focus on the logical processing of the program. [Related recommendations: vuejs video tutorial] The modifiers in

vue are divided into the following five types:

Form Modifier
• Event modifier
• Mouse button modifier
• Key value modifier
• v-bind modifier

2. Common modifiers

2.1 Form modifiers

The most commonly used modifier when we fill in the form is the

input tag , the most commonly used command is v-model

The modifiers about the form are as follows:

lazy
• trim
number

1. lazy

By default,

v-model will be executed every time input Update data after the event. You can add the lazy modifier to instead update the data after each change event:

<input type="text" v-model.lazy="value">
<p>{{value}}</p>

2. trim

If you want to automatically remove spaces at both ends of user input by default, you can add the

.trim modifier after v-model:

<input type="text" v-model.trim="value">

3. number

If you want user input to be automatically converted to numbers, you can add the

.number modifier after v-model Management input:

<input v-model.number="age" type="number">

2.2 Event modifier

The event modifier processes event capture and targets. There are the following modifiers:

stop
• prevent
• self
• #once
• capture
• passive
• native

1. stop

prevents event bubbling, which is equivalent to calling the

event.stopPropagation method. Clicking the event will stop delivery

<div @click="shout(2)">
    <button @click.stop="shout(1)">ok</button> 
</div> 
//只输出1

2. prevent

prevents the default behavior of the event, which is equivalent to calling the

event.preventDefault method. Submitting the event will no longer reload the page

<form @submit.prevent="onSubmit"></form>

3. self

The event handler will only be triggered when event.target is the element itself, for example: the event handler does not come from a child element

<div v-on:click.self="doThat">...</div>

When using modifiers, you need to pay attention to the calling order, because the related codes are generated in the same order. So using

@click.prevent.self will prevent the default behavior of all click events for the element and its child elements, while @click.self.prevent will only Default behavior to prevent click events on the element itself.

4. once

After binding the event, it can only be triggered once, and it will not be triggered the second time

<button @click.once="shout(1)">ok</button>

5. capture

When adding an event listener, use the

capture capture mode. For example, events pointing to internal elements are processed externally before being processed by internal elements. Make the event trigger from the top level containing this element downwards

<div @click.capture="shout(1)">
    obj1
<div @click.capture="shout(2)">
    obj2
<div @click="shout(3)">
    obj3
<div @click="shout(4)">
    obj4
</div>
</div>
</div>
</div>
// 输出结构: 1 2 4 3

6. passive

On the mobile side, when we are listening to the scroll event of the element, we will Keeping the

onscroll event triggered will make our web page become stuck, so when we use this modifier, it is equivalent to giving the onscroll event a .lazy modification symbol.

The default behavior of scrolling events (scrolling) will occur immediately instead of waiting for

onScroll to complete, in case it contains event.preventDefault()

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

.passive Modifiers are generally used in touch event listeners and can be used to improve the scrolling performance of mobile devices.

Do not use

.passive and .prevent at the same time, because .passive has already indicated to the browser that you Don't want to block the default behavior of events. If you do this, .prevent will be ignored and the browser will throw a warning.

7. native

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

<my-component v-on:click.native="doSomething"></my-component>

使用.native修饰符来操作普通HTML标签是会令事件失效的

2.3 鼠标按钮修饰符

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

• left 左键点击
• right 右键点击
• middle 中键点击

<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>

2.4 键盘修饰符

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

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

• 普通键（enter、tab、delete、space、esc、up...）
• 系统修饰键（ctrl、alt、meta、shift...）

// 只有按键为keyCode的时候才触发 
<input type="text" @keyup.keyCode="shout()">

2.5 v-bind修饰符

v-bind修饰符主要是为属性进行操作，用来分别有如下：

• async
• prop
• camel

1. async

能对props进行一个双向绑定

//父组件
<comp :myMessage.sync="bar"></comp> 
//子组件
this.$emit('update:myMessage',params);

以上这种方法相当于以下的简写

//父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){
 this.bar = e;
}
//子组件js
func2(){
  this.$emit('update:myMessage',params);
}

使用async需要注意以下两点：

• 使用sync的时候，子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致
• 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用
• 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的

2. props

设置自定义标签属性，避免暴露数据，防止污染HTML结构

<input id="uid" title="title1" value="1" :index.prop="index">

3. camel

将命名变为驼峰命名法，如将 view-Box属性名转换为 viewBox

<svg :viewBox="viewBox"></svg>

三、应用场景

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

• .stop：阻止事件冒泡
• .native：绑定原生事件
• .once：事件只执行一次
• .self ：将事件绑定在自身身上，相当于阻止事件冒泡
• .prevent：阻止默认事件
• .caption：用于事件捕获
• .once：只触发一次
• .keyCode：监听特定键盘按下
• .right：右键

（学习视频分享：web前端开发、编程基础视频）

The above is the detailed content of What are modifiers in Vue? Summary of common modifiers. For more information, please follow other related articles on the PHP Chinese website!