What are modifiers in Vue? Summary of common modifiers

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

1. What are modifiers

InVue, modifiers handle many ## The details of #DOMevents 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

vueare 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

inputtag , the most commonly used command isv-model

The modifiers about the form are as follows:

lazy
• trim
number

1. lazy

By default,

v-modelwill be executed every timeinputUpdate data after the event. You can add thelazymodifier to instead update the data after eachchangeevent:

 
{{value}}

2. trim

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

.trimmodifier afterv-model:

3. number

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

.numbermodifier afterv-modelManagement input:

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.stopPropagationmethod. Clicking the event will stop delivery

 ok 
 //只输出1

2. prevent

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

event.preventDefaultmethod. Submitting the event will no longer reload the page

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

...

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.selfwill prevent the default behaviorof all click events for theelement and its child elements, while@click.self.preventwill 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

ok

5. capture

When adding an event listener, use the

capturecapture 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

 obj1 
 obj2 
 obj3 
 obj4 
 
 
 
 // 输出结构: 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

onscrollevent triggered will make our web page become stuck, so when we use this modifier, it is equivalent to giving theonscrollevent a.lazymodification symbol.

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

onScrollto complete, in case it containsevent.preventDefault()

   
...

.passiveModifiers are generally used in touch event listeners and can be used toimprove the scrolling performance of mobile devices.

Do not use

.passiveand.preventat the same time, because.passivehas already indicated to the browser that youDon't wantto block the default behavior of events. If you do this,.preventwill be ignored and the browser will throw a warning.

7. native

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

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

2.3 鼠标按钮修饰符

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

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

ok ok ok

2.4 键盘修饰符

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

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

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

// 只有按键为keyCode的时候才触发 

2.5 v-bind修饰符

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

• async
• prop
• camel

1. async

能对props进行一个双向绑定

//父组件  //子组件 this.$emit('update:myMessage',params);

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

//父亲组件  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结构

3. camel

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

三、应用场景

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

• .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!