Vue JS — Introduction To Events— Vue From The TOP

Vamshi Krishna
Oct 3, 2019 · 2 min read
Image for post
Image for post

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 SkillShare.

Ko-Fi — Ko-fi.com/ionicvue

Thanks. See ya Next Time.

My Point of Vue

Everything Regarding Vue JS and its counterparts.

Vamshi Krishna

Written by

Full-Time Content Creator and Front-End Developer. Part-time Explorer.

My Point of Vue

Everything Regarding Vue JS and its counterparts. From tutorials to courses to freebies.

Vamshi Krishna

Written by

Full-Time Content Creator and Front-End Developer. Part-time Explorer.

My Point of Vue

Everything Regarding Vue JS and its counterparts. From tutorials to courses to freebies.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store