Vue.js Data Binding

Vue.js is such an easy to learn and approachable library. So, with the knowledge of HTML, CSS, and Javascript, we can start building web applications in Vue.js. Vue.js is built by combining the best features from an already existing Angular and react Frameworks.

Data binding is one of the most elegant features of Vue.js because it provides reactive/two-way data binding. In Vue.js, we do not have to write a lot of lines to have two-way data binding, unlike other frameworks. One-way data binding means that the variable is just bound to the DOM. On the other hand, two-way means that the variable is also bound from the DOM. When DOM gets changed, the variable also gets changed. So, let’s take a look at both of the data bindings and see the right difference.

One-way Data Binding

If we want to bind any variable, we can simply use Vue.js’s double curly braces syntax or “Mustache” syntax to bind any variable from the relative component instance.

<p> {{ linuxhintText }} </p>

Or, if we want to bind any variable inside an HTML attribute, we can use the v-bind directive.

<div v-bind:class="container"></div>

Vue.js also provides the shorthand for binding variables in an HTML attribute. Instead of writing v-bind:attribute-name, we can only use a colon “:” and attribute name.

<div :class="container"></div>

But these are just data bindings. To demonstrate the two-way data binding, we can use the v-model directive provided by the Vue.js.

Two-Way/Reactive Data Binding

In order to demonstrate reactive data binding, we can use the v-model directive on an input form field. It will internally emit an event and change the variable. To which we can bind somewhere else in the template using Double curly braces or “Mustache” syntax.

<input v-model="linuxhintText" placeholder="Type something" />

<p>You are typing: {{ linuxhintText }}</p></td>

Now, whenever we enter a character in the input form field, we can see that the variable is also updating simultaneously.

Wrapping up

In this article, we have learned how to bind variables in Vue.js using double curly braces or “Mustache” syntax. We have also demonstrated the two way/reactive data binding in Vue.js using the v-model directive. After reading this article, data binding is not a difficult task anymore for a beginner who has just got a start with Vue.js. So, keep on learning the concepts of Vue.js with linuxhint.com. Thank you!

from Linux Hint https://ift.tt/2ICRvew