Handling DOM events with Vue v-on

In this guide, we will be taking a look at how to use the Vue v-on directive.

Basically, the v-on directive is used to listen to DOM events and run some JavaScript when they’re triggered.

Here’s a sample:

<template>
  <div>
    <button type="button" v-on:click="step += 1">Add Step</button>
    <p>The button has added {{ step }} steps</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      step: 2,
    };
  },
};
</script>