Managing events

Now let’s see how to handle events with Vue.js. To do this, use the v-on directive, followed by the character : and the name of the event to be handled. For example, if you want to perform a particular process when a button is clicked, we will use the click event on the button and we will write v-on:click to handle the click event. The value of the directive (which follows the = sign) corresponds to the JavaScript expression to be executed (either a statement or a function call).

Tip

Vue.js makes it easier to write v-on:click by writing @click more simply. This rule is valid for all events.

In this example, we will implement a button that increments a reactive variable count on each click. We will also define an incr() method in the methods section of the component that increments the count variable:

Increment counter count (counter.js file)

const Counter = {
  data() {
    return {
      ...