Vue Event Handling with v-on

Use v-on (shorthand @) to listen to DOM events and run JavaScript when they are triggered.

Basic Event Listeners

<button @click="count++">Increment</button>
<button @click="handleClick">Click Me</button>
<input @keyup.enter="submitForm" />
<form @submit.prevent="handleSubmit">...</form>

Event Modifiers

<!-- prevent default browser action -->
<a @click.prevent="navigate">Link</a>

<!-- stop event propagation -->
<div @click="outer">
  <button @click.stop="inner">Click</button>
</div>

<!-- only fire once -->
<button @click.once="setup">Initialize</button>

<!-- self — only trigger if event target is the element itself -->
<div @click.self="closeModal">...</div>

Key Modifiers

<input @keyup.enter="search" />
<input @keyup.escape="clear" />
<input @keyup.arrow-up="selectPrev" />

<!-- ctrl + enter to submit -->
<textarea @keyup.ctrl.enter="submit"></textarea>

Accessing the Event Object

<button @click="handleClick($event)">Click</button>

function handleClick(event) {
  console.log(event.target)
}