Directive v-on

Attach an event listener to the element.

Expects: Function | Inline Statement | Object (without argument)

Modifiers:
.stop - call event.stopPropagation(). .prevent - call event.preventDefault(). .capture - add event listener in capture mode. .self - only trigger handler if event was dispatched from this element. .{keyAlias} - only trigger handler on certain keys. .once - trigger handler at most once. .left - only trigger handler for left button mouse events. .right - only trigger handler for right button mouse events. .middle - only trigger handler for middle button mouse events. .passive - attaches a DOM event with { passive: true }.

When used on a normal element, it listens to
native DOM events only. When used on a custom
element component, it listens to custom events
emitted on that child component.

When listening to native DOM events, the method
receives the native event as the only argument. If
using inline statement, the statement has access
to the special $event property:
v-on:click="handle('ok', $event)".

<!-- method handler -->
<button v-on:click="doThis"></button>

<!-- dynamic event -->
<button v-on:[event]="doThis"></button>

<!-- inline statement -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- shorthand -->
<button @click="doThis"></button>

<!-- shorthand dynamic event -->
<button @[event]="doThis"></button>

<!-- stop propagation -->
<button @click.stop="doThis"></button>

<!-- prevent default -->
<button @click.prevent="doThis"></button>

<!-- prevent default without expression -->
<form @submit.prevent></form>

<!-- chain modifiers -->
<button @click.stop.prevent="doThis"></button>

<!-- key modifier using keyAlias -->
<input @keyup.enter="onEnter" />

<!-- the click event will be triggered at most once -->
<button v-on:click.once="doThis"></button>

<!-- object syntax -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

Listening to custom events on a child component:

<MyComponent @my-event="handleThis" />

<!-- inline statement -->
<MyComponent @my-event="handleThis(123, $event)" />