Vue Event Listener

Posted on  by admin

You can use the v-on directive to bind event listeners to DOM events. It can be bound to either an event handler function (without the invocation parentheses) or an inline expression.

Reading Time: 2minutes


In this article, we’ll go through the process of adding up the Event Listener on a simple button and compare the methods form both Vanilla JavaScript & Vue JS.

You must have a basic understanding of HTML, JavaScript & a bit of Vue JS. But if you don’t know any of those, we’ll try and cover up some of it in the explanation.

Follow through the steps and fall in love with the reactivity of Vue JS.

Setting up the Boilerplate

Create a new HTML file and name it Index.html

Here we’ve setup a basic HTML file for our use. Included the Vue JS from CDN and Initialised the new Vue instance for our use.

The Vanilla JavaScript Method

Now we’ll try brushing up some Vanilla JavaScript skills and try to memorise those lengthy method names.

Inside of the Vue container, create a new special method called mounted() and place the JavaScript code inside of it.

The Vue Method

For the Vue Method, we’ll make use of the Vue directives inside of our markup.

Changes in the HTML File

If you noticed the change here, we’ve added a new Vue model directive in our Input and a new Vue on-click directive to our Button & assigned the method name to it. This is how we register the Event Listeners in Vue JS.

Changes in Script

Initialize an empty string and assigned to the newItem model inside of data.

In Vue JS, there’s a special helper function called methods() for adding up the new methods.
Place the following code inside of the Vue Container.

The addItem method is assigned to the Button we’re focussing on and it’s simply pushing the new values from the Input field to the names array.


In the Vanilla JavaScript method, you must have noticed that you have to dive into the DOM and then fetch the values. Where in Vue, the story is a lot different, data-centric and more simpler.

To learn more about Vue JS, you can visit their official website.

If you’ve any questions, leave us the comment below. You can also follow us on Twitter.