The syntax for v-on:click event would be like this:
Vue.js provides a shorthand “@” instead of using “v-on” as well.
Using Vue.js’s event handlers, we can access the DOM event as well, using inline statement, by passing the Vue.js’s especially provided “$event” variable into the method’s argument, just like the example below:
Vue.js also provides us to call multiple functions or methods. We can call more than one function and separate them by commas, like this example:
Vue.js provides event modifiers as well.
We often need to call modifiers along with the events. So, Vue.js provides some of the following modifiers:
It will stop the click event’s transmission.
It will prevent the page to reload or redirect.
It will trigger the click event only once.
It is mostly used to add the event listener.
We can chain the modifiers as well. However, keep in mind that the order of modifiers does matter, and it will affect the results.
In this article, we have covered the whole Click event handling concepts from noob to ninja level. We have learned about the different syntaxes of writing click events and the different ways to use
v-on:click directive provided by Vue.js for the ease of developers and different event modifiers. For more useful content like this, related to Vue.js, keep on visiting linuxhint.com.