JSFeeds: thewebjuice.com - How Event Handling works in Vue.js ?

Friday, 28 July, 2017 UTC

How Event Handling works in Vue.js ?

Summary

Event Handling in Vue.js

Event handling occupies a major part of any application. Vue.js as a framework provides very robust ways in which one can handle various events on the DOM. Similar to Angular, Vue.js also uses special directives that enable Vue.js to do event Handling. There are various events that Vue.js can handle but we will just concentrate on few of the most commonly used events. There are two ways in which we can trigger events and I will give you an example of both of them. We will use JSFiddle for the Vue Examples.

Prior to this I assume you Guys have an idea of Data Binding using Vue, there is special section for Dropdown as well.

These can be divided into three parts.

Manipulating Properties using Events
Triggering simple Events without arguments
Passing Arguments To Methods while listening to events

Remember all the events in Vue.js can be triggered using a directive called
v-on
. This directive is pretty handy and can help seamlessly to attach events to it. So keep in mind that this particular directive will always go hand in hand whenever we talk about event handling. Hopefully you will also be interested in Global Event Bus. If you are do check it out.

Getting Started

To get started let’s have a look at the syntax used with the directive

v-on

. This is a very trivial example where we can manipulate certain properties on various Events that are available on the DOM. So let’s see the syntax of it in the HTML format.

<div id="app">
  <button v-on:click="ClickHello">Click Me!!</button>
  <button v-on:dblclick="DBLClick">Double Click Me!!</button>
  <button v-on:mouseover="MouseOverMe">Mouse Over Me!!</button>
</div>

In the above code, we have shown three different types of events and how they are being assigned to a specific method. This is the way in which we have to use the directive. Now let’s proceed with the three different cases which we talked about.

Checkout the entire Section on Vuejs Tutorials. We have some really easy content to get started with. Hope you guys will check it out!!

Manipulating Properties using Events

In this particular sample, we will just go ahead and attach a JavaScript expression within a data property and see it change. This is nothing but Script based Evaluation on the DOM based event. Have a look at the code as well as the sample below.

HTML

<div id="app">
  <button v-on:click="counter+=1">Click Me!! {{counter}}</button>
</div>

Vue.js Code

var vew = new Vue({
el:'#app',
data:{
	counter:0
}
});

Output

You can see the sample below on JS Fiddle Results section.

Though this does not solve many problems, it does help us a lot in solving few of the issues. you can have it in places where you directly want to manipulate the property. This is handy in such situations. Now let’s have a look at events that trigger methods of a component.

Trigger Methods with and without Arguments

In order to keep the tutorial small, we will try to cover both the topics together. In this current situation, we will see how to trigger methods that are a part of the component. We will take up the similar example and expand it to do the same. You will be able to see the completed code in the JSFiddle sample. Below goes the HTML and the JavaScript code.

HTML

<div id="app">
  <button v-on:click="counter+=1">Click Me!! {{counter}}</button>
  <button v-on:click="ClickHello">Click Me!!</button>
  <button v-on:dblclick="DBLClick">Double Click Me!!</button>
  <button v-on:mouseover="MouseOverMe">Mouse Over Me!!</button>
  <h1 id="result">
    {{changeText}}
  </h1>
</div>

Vue.js Code

var vew = new Vue({
  el: '#app',
  data: {
    counter: 0,
    changeText:'This is the Result of Click'
  },
  methods: {
    ClickHello: function() {
      this.changeText = "You Clicked The button";
    },
    DBLClick: function() {
      this.changeText = "You Double Clicked The button";
    },
    MouseOverMe: function() {
      this.changeText = "You Are Hovering the button";
    }
  }
});

Now if you have a look at the code, you will see the simple method declaration. These methods don’t carry any argument. These, when triggered, change the inner HTML of the h1 tag. The different events we covered out here are as follows:-

Click
Double Click
Mouse Over

These are just few sample of the events that can be handled. Have a look at the below GIF to see this in action.

Facebook
Twitter
Google+
LinkedIn
Pinterest
Digg
Hacker News
StumbleUpon
Buffer

Trigger Events in Vue.js, Functions without Arguments

Passing Data Through method Arguments

Here we will add an extra button and carry data from Input box and then pass it to the argument changing some text on the DOM. The code is pretty simple and goes as mentioned below:-

HTML

<h1 id="inputText">{{changedData}}</h1>
 <input type="text" v-model="data">
 <button v-on:click="getData('New Data Point is')">Change Above!!!</button>

Here you can see that the getData() function takes an argument called data which is the data bound to input. This data gets passed to the function there by changing the DOM.

Vue.js Code

We will add an additional method which takes in an argument. That’s it!! The code below Concatenates the message New Data Point is to the text in the HTML and reassigns the data. You can see how I passed a string from the getData method.

getData:function(data){
    	this.changedData = data+this.data;
    }

You can see this working either on the JSFiddle or the GIF below.

Facebook
Twitter
Google+
LinkedIn
Pinterest
Digg
Hacker News
StumbleUpon
Buffer

Methods with Arguments Vue.js

You can have a look at the entire code out here on JSFiddle.

Conclusion

Let’s sum up the whole thing by seeing the entire code together in the JSFiddle. In the above sample, we have taken care of three kinds of ways in which we tackle events. Each one of them has a specific use case and is a must know for any Vue.js Developer. Please feel free to put in your comments and please let us know if we can make changes to our tutorials and make them more engaging. In the above paragraph, you can see the Entire code being projected using JSFiddle.

NOTE : Post has been updated according to some suggestions provided by our reader @froller

The post How Event Handling works in Vue.js ? appeared first on The Web Juice.

... more @ thewebjuice.com

thewebjuice.com