VueJS Directives and Data Binding with Two-Way Data Binding

In this tutorial, you will learn about VueJS Data Binding Concept. The VueJS data binding is, how we bind data into the HTML elements using VueJS.

To Bind Data into an HTML element, we will use the Vue Directives. so first, you have to know what are the Vue directives.

---

What are the Vue Directives?

The Vue JS Directives are prefixed with v- to indicate that they are special attributes provided by Vue, and the Vue directives are used to apply special reactive behavior to the rendered DOM.

• Some Vue Directives
  • v-bind
  • v-on
  • v-html
  • v-text

---

HTML Attributes Binding (v-bind:)

In this section, we will see how to bind data into an HTML Attribute. To bind data into an Attribute we will use the v-bind: Directive.

<style>
.red{
  color: red;
}
</style>

<div id="myApp">
  <h1 v-bind:class="redColor">Nice</h1>
  <a v-bind:href="link">W3jar.Com</a><br><br>
  <input type="text" v-bind:value="email">
</div>

var myApp = new Vue({
  el:'#myApp',
  data:{
    redColor:"red",
    link:"https://www.w3jar.com/",
    email:"[email protected]"
  },
});

---

HTML Content Binding (v-html)

In this section, we will learn how to bind HTML Content inside an HTML Element. To do this we will use the v-html Directive.

<div id="myApp">
    <!-- Wrong (It Will Not Work) -->
    <div>{{htmlContent}}</div>

    <!-- Right Way -->
    <div v-html="htmlContent"></div>
</div>

var myApp = new Vue({
  el:'#myApp',
  data:{
      htmlContent:"<h1>Hello World!</h1>"
  },
});

---

Text Binding

Now we will see how to bind text using the v-text directive. It is an alternative of {{ data }}.

<div id="myApp">
  <h1 v-text="name"></h1>
</div>

var myApp = new Vue({
  el:'#myApp',
  data:{
    name:"John Doe",
  },
});

---

Directives Inline Expressions

how to add Inline Expressions into Directives.

<div id="myApp">
  <h1 v-text="'Hello '+ firstName +' '+ lastName"></h1>
</div>

var myApp = new Vue({
  el:'#myApp',
  data:{
    firstName: "John",
    lastName: "Doe"
  },
});

---

Conditional Attribute Binding

This section about is – How to place conditions on Attribute Binding.

In the following example, we will see If the condition is true then add the attribute.

Syntax:

<h1 v-bind:class="{value:condition}">Hello VueJS</h1>

---

Example:

<style>
.red-color{
  color: red;
}
</style>

<div id="myApp">
    <h1 v-bind:class="{'red-color':showClass}">Hello VueJS</h1>
</div>

var myApp = new Vue({
  el:'#myApp',
  data:{
      showClass:true
  },
});

---

Another Example:

<style>
.red-color{
  color: red;
}
</style>

<div id="myApp">
    <h1 v-bind:class="{'red-color':(showClass == 'yes')}">Hello VueJS</h1>
</div>

var myApp = new Vue({
  el:'#myApp',
  data:{
      showClass:'yes'
  },
});

---

Binding multiple values ​​into an attribute with conditions

Now we will see how to bind multiple values ​​in an attribute with conditions.

<style>
.red-color{
  color: red;
}
.text-underline{
  text-decoration: underline;
}
</style>

<div id="myApp">
  <h1 v-bind:class="classObject">Hello VueJS</h1>
</div>

var myApp = new Vue({
  el:'#myApp',
  data:{
      classObject:{
        'red-color':true,
        'text-underline':true
      }
  },
});

---

Vue JS Two Way Data Binding

When we bind data into the data property as well as User-Interface that’s called two-way data-binding.

With the help of the v-model directive, we perform the two-way data binding.

<div id="myApp">
  <p>Type Another Name</p>
  <input type="text" v-model="name">
  <h1 v-text="'Hello '+ name"></h1>
</div>

var myApp = new Vue({
  el:'#myApp',
  data:{
    name: "John"
  },
});

---

Shortcut of the v-bind: Directive

The shortcut of the v-bind: directive is colon ( : )

<style>
.red-color{
  color: red;
}
</style>

<div id="myApp">
  <h1 :class="red">Red</h1>
</div>

var myApp = new Vue({
  el:'#myApp',
  data:{
    red: "red-color"
  },
});