Vue: Exploring Data Binding

Jinal Shah  Print 
23 Sep 2018
01 Oct 2018
Beginner
273

Vue.js is single page component application. One component of Vue.js has been divided in three parts: template, script, style.

  • Template where HTML for your application resides.

  • Script where logic for your application resides.

  • Style where style for your application resides.

    A simple structure would look like this

In this article, I am going to show you what is data binding and which different methods are available for data binding in Vue.js. So, let’s get started!! Data binding is very essential and powerful for software development. In simple words, it is communication between your script and template. In vue, data binding provides fast and automatic communication between html and your logic portion. Consider the case, when you want your data to be synced with your script and template and vice versa. Data binding helps you in handling this situation. So, let’s discuss different types of data binding with examples.

String Interpolation

String interpolation, in simple term is defined as updating the value of a certain variable at script tag and displaying it at the template (presentation). First create any variable of your choice in script tag. In this below example, I have created one simple variable named ‘msg’.

Variables are created inside the data() method and it should have one return statement. I have assigned the value to my msg variable. Now, I want to display this value to the user. We can display this value simply by enclosing it between

{{ name_of_property}}.
{{ }} – stands for property binding!!

Here it is,

As an output you will get to see the value assigned to msg variable. In our case ‘hello world’ will be displayed.

Event binding

Event as it name implies, if you want to register any event on your control, event binding will help you in this case. Say for example, we have one button at html side and as soon as user clicks the button, one alert message welcoming that user should be displayed. Here, click is an event which is of your template control and you want your script tag to listen to it.

As you can see, there is one button for which I have registered one event, which is onClick event. @ helps you to register an event on any control.

Important Note

You can also use v-on directive to listen DOM events. For example, you can replace @click with v-on:click. Both works similarly. Now, once this event is listened, we need onAdd() function to take an action. So, our script would look like this

All your methods should be enclosed between methods. Yes, you can always pass the parameters to this function like any other normal function.I hope, you are finding it all easy till now. Now, let’s move to the next type of binding.

Two way Binding

Two way binding, in simplest term, it is type of binding which will help you to sync your data with your DOM without having you to do anything. The one example which I have explained for simple string interpolation topic is the simplest example of one way binding in which, your variable is bound to your DOM.But, in two way binding data can be bonded to both DOM and JS.

Let me show you the output screen

This is the initial output. Whatever value you have assigned to the msg variable, will be shown in the h1 tag (yes, it is obvious) as well as, it will be displayed in the input tag.Next, whatever you type in input box, will be updated in msg variable and h1 will be reflected automatically.

This is the beauty of two way binding!!

Class and Style Binding

Vue.js makes it much easy to handle CSS. Data binding is commonly used to manage an element’s class list and its inline CSS. Class and Style binding will allow you to manage both these attributes together. V-bind is used with class and style. In the below example, the colour of the text will be dynamically changed based on the current flag value.

v-bind :class indicates that, apply the colour red to the text, if the flag value is true, green otherwise.Each time button is pressed, value of flag is changed accordingly. And flag will decide, text will be shown in which colour.Initially, flag is set to TRUE, so the red coloured text will be displayed with our current flag value. So, the output screen would like this

As soon as the button is pressed, value of flag will become FALSE, so the Green coloured text will be displayed with our current flag value. So, our output screen would look like this

Summary

Great! So, hopefully you have learned something useful about binding in vue.js. And utilising your HTML, SCRIPT and STYLE with vue.js is a bit important. Data binding helps in us in that. I wish reading this article has made your time worth reading. Keep going and coding!!

Crack Your Technical Interview

 
Join Our Hands-on Training Programs
+