Methods in Vue used for data Binding
What is Data binding?
There are different Data Bindings in Vue. Data binding is a technique used to bind data sources from the provider and consumer together and synchronize them at the time of retrieval. In a data binding process, whenever data is changed, it is reflected automatically by the elements bound to the data.
Its an easy to learn and approachable library. So, with the knowledge of HTML, CSS, and Javascript, we can build a 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 cool 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> {{ dreamText }} </p>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
Reactive data binding, can be demonstrated using 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="dreamText" placeholder="Type something" />
<p>You are typing: {{ dreamText }}</p></td>Now, whenever we enter a character in the input form field, we can see that the variable is also updating simultaneously.
Recap:
Binding variables in Vue.js can be done using double curly braces or the so called “Mustache” syntax.
Keep on learning the concepts of Vue.js with me. Thank you for visiting my space and study with me!
Happy Coding! 🌴 💻