An article briefly analyzing some vue event modifiers

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... (＾ -＾)