This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money. 【 Final comment lucky draw 】

Modifier of the V-ON instruction

Event modifier

.stop

Call event.stop to stop the event from bubbling

 <! Button --> 
<div id="app">
  <div @click="alert('div')">
    <button @click.stop="alert('button')">Click on the</button>
  </div>
</div>
Copy the code

const vm = new Vue({ el: '#app', methods: { alert(str) { alert(str); }}})Copy the code

.prevent

Call event.preventDefault() to prevent the default event

 <! -- The page will not reload after clicking submit button --> 
<div id="app">
  <form v-on:submit.prevent="onSubmit">
    <input type="submit">
  </form>
   <! -- can also have only modifiers --> 
  <form v-on:submit.prevent>
    <input type="submit">
  </form>
</div>
Copy the code

const vm = new Vue({ el: '#app', methods: { onSubmit() { console.log('submit'); }}})Copy the code

.capture

Event capture mode

 <! Insert div into button --> 
<div id="app">
  <div @click.capture="alert('div')">
    <button @click="alert('button')">Click on the</button>
  </div>
</div>
Copy the code

const vm = new Vue({
  el: '#app',
  methods: {
    alert(str) { alert(str) }
  }
})  
Copy the code

.self

The callback is fired only if the event is fired from the listener bound element itself

 <! -- Click button, only popup button --> 
<div id="app">
  <div id="app">
    <div :style="{ backgroundColor: 'red' }" 
    @click.self="alert('div')">
      <button @click="alert('button')">Click on the</button>
    </div>
  </div>
</div>
Copy the code

const vm = new Vue({
  el: '#app',
  methods: {
    alert(str) { alert(str) }
  }
})
Copy the code

.once

Only one callback is triggered

2.1.4 new

Click the button button twice to pop up the button once<div id="app">
  <button @click.once="alert('button')">Click on the</button>
</div>
Copy the code

const vm = new Vue({
  el: '#app',
  methods: {
    alert(str) { alert(str) }
  }
})
Copy the code

.passive

Set Passive in addEventListener
It can improve the performance of the mobile terminal
2.3.0 new

According to the passive?

Even if an empty function is executed when the touch event is triggered, the page freezes. Because the browser doesn’t know whether the listener will block the default event, the browser waits until the function is complete before deciding whether to scroll the page. Passive listener, which allows the developer to tell the browser that the listener will not block the default behavior, so that the browser can scroll through the page with confidence. This can greatly improve the performance of mobile pages, as it is estimated that only 20% of touch events block the default event.
.passive tells the browser that you do not want to block the event’s default behavior

Pay attention to

When using modifiers, order is important. The corresponding code is generated in the same order. Therefore, V-on :click.prevent. Self will block all clicked default events v-on:click.self. Prevent will block only clicked default events on the element itself
Do not use.passive with.prevent, as.prevent will be ignored and the browser may show you a warning.

Key modifier

When listening for keyboard events, we often need to check for detailed keystrokes. Vue allows you to add key modifiers for V-Ons when listening for keyboard events

<! Call 'vm.submit()' only if 'key' is' Enter '--> <input V-on :keyup. Enter ="submit">Copy the code

You can directly convert any valid keyname exposed by keyboardevent. key to kebab-case as a modifier.

<input v-on:keyup.page-down="onPageDown">
Copy the code

In the example above, the handler is only called when $Event. key equals PageDown.

The key code

Using the keyCode feature is also allowed:

 <! The return key triggers the execution of the Submit function 
<input v-on:keyup.13="submit">
Copy the code

Note: keyCode’s event usage is deprecated and may not be supported by the latest browsers.

To support older browsers if necessary, Vue provides aliases for most commonly used keycodes:

.Enter (Enter)
.tab
.delete (capture the delete and backspace keys)
.esc
.space (space bar)
.up (arrow key up)
.down (arrow down key)
.left (arrow left key)
.right (right arrow)

In addition to using the key aliases provided by Vue, you can also customize key aliases:

 // Global configuration
 // You can use 'V-on :keyup.f1'
Vue.config.keyCodes.f1 = 112
Copy the code

Vue.config.keyCodes = {
  v: 86.f1: 112.// Small hump is not available
  mediaPlayPause: 179.// Instead, they are delimited by short lines and enclosed in double quotation marks
  "media-play-pause": 179.up: [38.87]}Copy the code

<input type="text" @keyup.media-play-pause="method">
Copy the code

System modifier key

You can use the following modifier to implement a listener that fires a mouse or keyboard event only when the corresponding key is pressed. The modifier key differs from a regular key in that it must be in the pressed state when the keyup event is triggered. In other words, keyup.ctrl can only be triggered when CTRL is held down and other keys are released. Releasing the CTRL alone will not trigger the event. If you want this behavior, use keyCode: keyup.17 for CTRL instead.

.ctrl
.alt
.shift
.meta
On the Mac system keyboard, meta corresponds to the Command key (⌘).
The Windows keyboard meta corresponds to the Windows logo key (⊞).
On the Sun OS keyboard, meta corresponds to a solid gem key (◆).
On other specific keyboards, notably those on MIT and Lisp machines, and on subsequent products such as the Knight keyboard and space-Cadet keyboard, meta is marked as “meta”.
On the Symbolics keyboard, meta is marked as “meta” or “meta”

 <! -- Alt + C --> 
<input @keyup.alt.67="clear">

 <! -- Ctrl + Click --> 
<div @click.ctrl="doSomething">Do something</div>
Copy the code

Exact modifier

Allows you to control events triggered by the exact combination of system modifiers.
2.5.0 +

 <! -- Trigger even when Alt or Shift is pressed together --> 
<button @click.ctrl="onClick">A</button>

 <! -- Triggered only when Ctrl is pressed --> 
<button @click.ctrl.exact="onCtrlClick">A</button>

 <! -- triggered when no system modifier is pressed --> 
<button @click.exact="onClick">A</button>
Copy the code

Mouse button modifier

The execution function is processed only when a particular mouse button is clicked
2.2.0 +
.left
.right
.middle

The last

If it is helpful to you, I hope I can give 👍 comment collection three even!

Bloggers are honest and answer questions for free ❤

Welcome to discuss in the comments section, the excavation officials will draw 100 nuggets in the comments section after the end of the Excavation project activity, see the details of the lucky draw in the event article, friends to discuss!!

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

[Quick start Vue series] Chapter 3: Vue common modifiers, in-depth analysis

Modifier of the V-ON instruction

Event modifier

.stop

.prevent

.capture

.self

.once

.passive

Pay attention to

Key modifier

The key code

System modifier key

Exact modifier

Mouse button modifier

The last

[Quick start Vue series] Chapter 3: Vue common modifiers, in-depth analysis

Modifier of the V-ON instruction

Event modifier

.stop

.prevent

.capture

.self

.once

.passive

Pay attention to

Key modifier

The key code

System modifier key

Exact modifier

Mouse button modifier

The last

Related Posts

How to Use mocks

The DOM event flow

Vue 2.x and Vue 3.x data hijacking implementation and advantages and disadvantages