Vue JS — Introduction To Events— Vue From The TOP
Hello and welcome back to a simple mini-series called Vue From the TOP. If you are new here you can check out the other posts in this series using the neat little box below.
Last time we looked at one way and two-way data binding in Vue JS with examples. Today we will look into these simple little things called events.
Events in Vue JS are exactly the same as events in JavaScript. So this post will be a super short one and its purpose is just to introduce you the concept of events and showcase a couple of examples.
Events are the things that happen to HTML Elements when a particular action is performed on them.
For example, clicking a button is an event. Hovering the mouse over an element is an event. Double-clicking is an event, etc.
So, for the sake of this post, let's create a button in our App.vue.
Yay! we have this neat little button, now we need to detect when this button is clicked. In vanilla JavaScript, we usually go with “addEventlistener” attribute, but here these events are baked into Vue’s templating engine ( fancy name for HTML in Vue ).
We can access event listeners in Vue by using “v-on” attribute to the HTML elements. In short, it can also be used as “@’. You’ll see what I mean in the code snippet below.
In both cases, the button when clicked will execute a function called “button_clicked”. We can declare the button in the methods section below our template.
As simple as that, now you are armed with the skill of events in Vue JS. There are several different types of events we can handle with this. We can handle “mouseover” “change” “drag” “dblclick”( double Click ) “keyup” “keydown”, “focus”, the latter three can be super helpful when we are dealing with input properties.
Now there is this one event I want to look into in particular. The “submit” event. Because this event can be used to submit forms — which are integral to most websites.
In the next post, we will look into how to work with submit an event and also we will look into an extension to events called Event Modifiers.
Alright, thanks for making it till the end of this super simple short post on events in Vue JS. Hope you learned something new. If you did, please support me by clapping for this article and you can find my video lectures on Cynohub.
Thanks. See ya Next Time.
