1, Event overload

<button @click="c1">Click 1</button>
<button @click="c2('Zhang San')">Click 2</button>
<button @click="c3('Li Si', $event)">Click 3</button>

methods: {
    c1(e) { // There are no parameters, and $event is passed by default
        console.log(e); // MouseEvent object
    },
    c2(val) { // With parameters, pass parameters
        console.log(val);
    },
    c3(val, e) { // There are parameters. If you want to get the event, you need to add $event to the parameter when binding the method to the event
        console.log(val + '---' + e);
    }
   }

2, Prevent event bubbling stop, default behavior prevent

• Event bubbling: when an element receives an event, it will pass the event it receives to its parent until the window.

stay js Medium operation
event.stopPropagation();

Vue During event binding,
@click.stop

• Block default behavior for events

 // Prevent the a tag from jumping and only execute the function test
<a href="http://blog. csdn. Net "@ click. Prevent =" test "> Click</a>

3, Event handling

1.1 event modifier

• Calling event. in event handler Preventdefault() or event Stoppropagation () is a very common requirement. (Vue is abbreviated as. prevent and. stop)

Event modifier
.stop
.prevent
.capture
.self
.once
.passive

<!-- Prevent click event from continuing propagation -->
<a v-on:click.stop="doThis"></a>

<!-- Submitting events no longer reloads the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- Modifiers can be concatenated -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- Only modifiers -->
<form v-on:submit.prevent></form>

<!-- Use event capture mode when adding event listeners -->
<!-- That is, events triggered by internal elements are processed here first, and then handed over to internal elements for processing -->
<div v-on:click.capture="doThis">...</div>

<!-- Only when event.target Is the handler that is triggered when the current element itself -->
<!-- That is, the event is not triggered from an internal element -->
<div v-on:click.self="doThat">...</div>

============2.1.4 newly added===========
<!-- The click event will only be triggered once -->
<a v-on:click.once="doThis"></a>
==========2.3.0 newly added=============
corresponding addEventListener Medium passive
<!-- Default behavior for scrolling events (Rolling behavior) Will be triggered immediately -->
<!-- Without waiting `onScroll` complete  -->
<!-- This includes `event.preventDefault()` Situation -->
<div v-on:scroll.passive="onScroll">...</div>

• Unlike other modifiers that work only on native DOM events The once modifier can also be used on custom component events.
• . The passive modifier can especially improve the performance of the mobile terminal.

Don't take it passive and Use with prevent because Prevent will be ignored and the browser may show you a warning. Remember passive will tell the browser that you don't want to block the default behavior of the event.

be careful! When using modifiers, order is important; The corresponding code will be generated in the same order. Therefore, use v-on: click prevent. Self will block all clicks, and v-on: click self. Prevent only blocks clicks on the element itself. (same as other event modifiers)

1.2 key modifier

• When listening for keyboard events, we often need to check the detailed keys. Vue allows you to add key modifiers for v-on when listening for keyboard events:

<!-- Only in `key` yes `Enter` Time call `vm.submit()` -->
<input v-on:keyup.enter="submit">

The event usage of keyCode has been deprecated and may not be supported by the latest browsers.

In order to support old browsers if necessary, Vue provides aliases for most commonly used key codes:

Key code alias
.enter
.tab
. Delete (capture delete or backspace key)
.esc
.space
.up
.down
.left
.right

• In addition, Vue also provides Vue config. Keycodes can give v-on a custom key alias.

// You can use ` v-on: Keyup f1`
Vue.config.keyCodes.f1 = 112

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // camelCase not available
  mediaPlayPause: 179,
  // Instead, kebab case is enclosed in double quotation marks
  "media-play-pause": 179,
  up: [38, 87]
}

1.3. System modifier key (added in 2.1.0)

• You can use one key to combine keys

Combination key
.ctrl
.alt
.shift
. meta(window key under window system and command key under mac)

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

Note that the modifier key is different from the conventional key. When used with the keyup event, the modifier key must be pressed when the event is triggered. In other words, keyup can only be triggered by releasing other keys while pressing Ctrl ctrl. Releasing Ctrl alone will not trigger an event.

1.4,. exact modifier (new in 2.5.0)

• . The exact modifier allows you to control events triggered by a precise combination of system modifiers.

<!-- even if Alt or Shift Also triggered when pressed together -->
<button v-on:click.ctrl="onClick">A</button>

<!-- Yes and only Ctrl Triggered when pressed -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- Triggered when no system modifier is pressed -->
<button v-on:click.exact="onClick">A</button>

1.5 mouse button modifier (added in 2.2.0)

• The handler only responds to a specific mouse button.

Mouse button
.left
.right
.middle

Press enter When, execute t1 function
<input type="text" @keyup.enter="t1"> 

Press enter on the element to trigger the focus on other elements
@keyup.enter.native 

Just press enter to focus on the current element
@keyup.native.enter

@keyup.enter.prevent.stop

@keydown.native.enter.prevent.stop

• @keyup.enter and @ Keyup enter. The difference between native
  For encapsulating components (such as El input), the key modifier (@ keyup.enter) should be followed by. native