Vue.js Data Binding

Data binding is one of the core features of Vue.js. It connects your application's data with the user interface, allowing the DOM to reflect the current state automatically. When data changes, the DOM updates without requiring manual intervention.

Vue can handle both one-way and two-way data binding. This tutorial explains how each type works and shows how to use Vue's directives to bind data efficiently.

What is Data Binding in Vue?

Data binding means linking your JavaScript data with HTML elements. Vue does this reactively—so when the data changes, the view updates instantly. Vue provides the following directives for data binding:

1. {{ }} for text interpolation
2. v-bind for binding attributes
3. v-model for two-way form input binding
4. v-html for rendering raw HTML

Text Interpolation ({{ }})

Vue allows you to insert data into the DOM using double curly braces. This is the simplest form of one-way data binding.

Example:

<div id="app">
  <p>{{ message }}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        message: 'Welcome to Vue.js'
      };
    }
  }).mount('#app');
</script>

Here, the content inside <p> will automatically update if message changes.

Attribute Binding with v-bind

Use v-bind to bind dynamic values to HTML attributes like href, src, id, or class.

Example:

<div id="app">
  <a v-bind:href="url">Visit Site</a>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        url: 'https://www.w3schools.in'
      };
    }
  }).mount('#app');
</script>

You can also shorten v-bind to just :. So v-bind:href becomes :href.

Two-Way Binding with v-model

Vue provides two-way data binding using the v-model directive. It is commonly used in form elements like inputs, textareas, and selects. This keeps the data and UI in sync.

Example:

<div id="app">
  <input v-model="name" placeholder="Enter your name">
  <p>Hello, {{ name }}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        name: ''
      };
    }
  }).mount('#app');
</script>

Typing into the input updates name, and the paragraph updates in real-time.

Binding HTML with v-html

When you want to render raw HTML instead of plain text, use the v-html directive. This is useful for showing rich content like formatted text or embedded HTML tags.

Example:

<div id="app">
  <div v-html="htmlContent"></div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        htmlContent: '<strong>Vue is reactive!</strong>'
      };
    }
  }).mount('#app');
</script>

Use v-html carefully, especially with untrusted content, as it can introduce security risks.

Conclusion

Vue.js makes data binding simple and efficient. With just a few directives, you can connect your data and DOM elements seamlessly. You learned how to use:

• {{ }} for text output
• v-bind for dynamic attributes
• v-model for two-way input binding
• v-html for rendering raw HTML

Data binding is the foundation of Vue's reactivity system. With it in place, you're ready to handle user interactions, which we'll cover in the next tutorial on event handling in Vue.js.