Using the @click directive in Vue

In this article, you will learn how to use the @click directive to handle events in vue.

It is worthy of note, that the @click directive is similar to v-on:click event handler.

lets assume we have a method that logs a simple message to the console.

  methods: {
    displayMessage() {
      console.log("Throws a sample message");
    },
  },

We can trigger this function by using the @click directive to call the function.

<template>
  <div>
    <button type="button" @click="displayMessage">Call Message</button>
  </div>
</template>