Vue Event Handling

Event Handling plays a crucial part in any web application. The Vue Framework makes it easy to listen and respond to DOM Events with the v-on directives.

v-on

The v-on directive is used to listen and respond to DOM events. The event type follows the v-on directive separated by a colon. The value of the v-on directive contains a JavaScript expression, which is executed when the specified event occurs.

const app = Vue.createApp({
  data: function () {
    return { counter: 0 }
  }
})

const vm = app.mount('#app')

<div id="app">
  <button v-on:click="counter++">Button clicked {{ counter }} times</button>
</div>

Event Types

The v-on directive is used to listen to native DOM events. The event type is specified using a colon.

The following examples are some of the possible event types that can be added to the v-on directive.

<!-- event type: click -->
<button v-on:click="doThis"></button>

<!-- event type: keyup -->
<input type="text" v-on:keyup="doThis">

<!-- event type: change -->
<select v-on:change="doThis"></select>

<!-- event type: submit -->
<form v-on:submit="doThis"></form>

Shorthand

The shorthand for the v-on directive is the @ character followed by the event type. No colon is required.

<button @click="counter++">Click me!</button>