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.
My Point of Vue
Everything Regarding Vue JS and its counterparts. From tutorials to courses to freebies.
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 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.
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 SkillShare.
Ko-Fi — Ko-fi.com/ionicvue
Thanks. See ya Next Time.