Vue.js is a Javascript framework for user interface. There are many directives in Vuejs. A directive’s job is to reactively apply special behavior to the DOM when the value of its expression changes. You can use the v-on directive to bind event listeners to DOM events.

We are binding a click event listener to a method named clickMe. Here’s how to define that method in our Vue instance. Here we have a counter variable initialized to zero. Inside the method, we are incrementing the value of the counter. So for each click on the button, the method is invoked. You will get the code here.

Here in this example, we are using two button and methods. One for incrementing the count and other for decrementing. You can see code here.

Note :-

For example,

This will give same result as before.

We can see another example. Here we have an input field where we type the url which is bound to the Js using v-model.  We have a button with click event listener which is bound to the method humanizeUrl. We have two urls, url and cleanUrl. url  is what we type in the input field and cleanUrl  is getting by replacing the url using regular expression. Regular expression is not a Vue.js thing. Its a universal programming format. We are saving the domain name of url in the cleanUrl. Thus we will get the value on cleanUrl in the view. You will get the code here.

But here you won’t redirect to the url when we click on it. That is we have to get the url. So we need to bind the href. You can use v-bind directive for this.

Here is the Demo. So the url will redirect to the correct page. You can try out these examples to get an idea about event listeners in Vue.js.