Vue.js Click Events

Vue.js is a very powerful, easy to learn, and approachable library that with the knowledge of HTML, CSS, and Javascript, we can start building web applications in it. Vue.js is built by combining the best features from already existing Angular and react Frameworks. It is a progressive and reactive Javascript framework that is used to build UIs (User Interfaces) and SPAs (Single-page Applications), which is why the developers love to code and feel freedom and comfort while developing applications in Vue.js.If we take a look at the Event Listening and Handling in Vue.js., we will know that it provides a “v-on” directive to listen and handle events. We can use the “v-on” directive to listen to the DOM and perform the required tasks. It also provides many event handlers. However, in this article, we will only learn and keep our focus on the click events. So, let’s get started!

Just like Javascript’s onClick event, Vue.js provides v-on:click for listening events.

The syntax for v-on:click event would be like this:

<button v-on:click="functionName">Click</button>

Vue.js provides a shorthand “@” instead of using “v-on” as well.

<button @click="functionName">Click</button>

Vue.js doesn’t stop in just listening to the click event and calling the function. It will also allow us to directly write any arithmetic operation or anything related to Javascript inside the quotation marks “ ”. Just like this:

<button @click="num += 1">Add</button>

Vue.js provides us to call the method or function in an inline Javascript statement, as shown below:

<button @click="message('Hi')">Show</button>

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:

<button @click="message('Hi', $event)">Send</button>

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:

<button @click="first('Hello'), second('Hi', $event) ">Submit</button>

Vue.js provides event modifiers as well.

Event Modifiers

We often need to call modifiers along with the events. So, Vue.js provides some of the following modifiers:

.stop

It will stop the click event’s transmission.

<a @click.stop="doThis"></a>

.prevent

It will prevent the page to reload or redirect.

<form @submit.prevent="onSubmit"></form>

.once

It will trigger the click event only once.

<a @click.once="doThis"></a>

.capture

It is mostly used to add the event listener.

<div @click.capture="doThis">...</div>

We can chain the modifiers as well. However, keep in mind that the order of modifiers does matter, and it will affect the results.

<a @click.stop.prevent="doThat"></a>

Conclusion

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.

from Linux Hint https://ift.tt/38YWtNr