An article briefly analyzing some vue event modifiers

This article brings you relevant knowledge about the front-end. It mainly talks about some event modifiers in vue. Friends who are interested can take a look at it. I hope it will be helpful to everyone.

I encountered vue’s keyboard event during project development. The following is the project Code snippet:

<div class="query-form-left">
   <i-Form :model="formItem" inline>
       <form-item  >
           <i-input style="width:200px"  placeholder="名称" v-model="formItem.name" @keyup.enter.native="queryTableDataByAction"></i-Input>
       </form-item>
       <form-item>
           <i-input placeholder="负责人" v-model="formItem.ownerUserName" @keyup.enter.native="queryTableDataByAction"></i-Input>
       </form-item>
       <form-item>    
           <i-Button type="ghost" @click="queryTableDataByAction">查询</i-Button>
       </form-item>
   </i-Form></div>

In the code snippet, I found that there is always .naitvie after the keyboard event. I didn’t understand the reason at first. After checking, I found that it was because vue used It has its own event delivery mechanism. For example, events such as @click are encapsulated by vue. If you want to listen to a native event on the root element of a component, you need to use the v-on modifier .native

@keyup in the above code snippet. enter is written on an encapsulated component (iView component used in the project), therefore, additional identifiers need to be added to some things that actually handle DOM native events. .native, if it is used directly on input, there is no need to add it.

In addition, vue provides a lot of modifiers.

1. Event modifier

.stop Prevent the click event from continuing to propagate
.prevent Submit event No longer reloading the page
.capture Use event capture mode when adding event listeners, that is, events triggered by the element itself are processed here first, and then handed over to internal elements for processing
.self The handler function is only triggered when event.target is the current element itself, that is, the event is not triggered from an internal element
.once The click event will only be triggered once
.passive The default behavior of the scroll event (that is, the scroll behavior) will be triggered immediately, including the case of event.preventDefault()

Note: Modifiers can be concatenated ,When using modifiers, the order is important; the ,corresponding code will be generated in the same order. Therefore, using @click.prevent.self will prevent all clicks, while @click.self.prevent will only prevent clicks on the element itself.

2. Key modifier

can use keycode directly, but it is difficult to remember it all, so Vue provides commonly used key aliases

.enter Enter key
.tab Tab space key
.delete (captures "delete" and "backspace" keys)
.esc Exit
.space Spacebar
.up Up key
.down Down key
.left Left key
.right Right key

3. System modifier key

is OK Use the following modifiers to implement a listener that triggers mouse or keyboard events only when the corresponding key is pressed.

.ctrl .alt .shift .meta

Only listed here Part of the vue event modifiers. For more detailed introduction to the modifiers, you can view the vue official documentation

Summarize a little bit every day... Gain a little bit every day... Make a little progress every day... (＾ -＾)

Recommended study: "vue.js video tutorial"

The above is the detailed content of An article briefly analyzing some vue event modifiers. For more information, please follow other related articles on the PHP Chinese website!