Overview

Data binding connects JavaScript state with the user interface. When reactive data changes, Vue updates the corresponding page content. For form controls, v-model also reflects user input back into application state, reducing manual DOM code and keeping both sides synchronized.

Key concepts

• Interpolation binds values as text
• v-bind connects data to attributes
• v-model synchronizes form controls
• Bindings update reactively without reloading the page

What is Data Binding?

Data binding is the connection between component state and rendered HTML. If a stored name changes from Alice to John, Vue updates every template binding that depends on that name.

Why do we need Data Binding?

In a shopping cart, changing the quantity should update the item total and order total immediately. Vue lets code update the underlying state while the framework synchronizes the affected UI, reducing repetitive DOM manipulation and potential inconsistencies.

Text Binding

Mustache syntax renders a value as escaped text.

<template>
  <h2>{{ message }}</h2>
</template>

<script>
export default {
  data() {
    return {
      message: "Welcome to Vue.js!"
    };
  }
};
</script>

Whenever message changes, Vue updates the heading automatically.

Attribute Binding

Interpolation cannot be placed directly inside HTML attributes. Use v-bind to bind src, href, title, disabled, and other attributes to JavaScript values.

<template>
  <img v-bind:src="imageUrl" alt="Vue Logo">
  <a :href="profileUrl" :title="linkTitle">Profile</a>
</template>

The colon is shorthand for v-bind, so :src and v-bind:src are equivalent.

Class Binding

Vue can toggle CSS classes from objects or combine class names with arrays.

<button
  class="button"
  :class="{ active: isActive, disabled: isDisabled }"
>
  Save
</button>

Style Binding

v-bind can also connect inline style properties to state. Use CSS classes for reusable design and style binding for genuinely dynamic values.

<p :style="{ color: textColor, fontSize: size + 'px' }">
  Dynamic style
</p>

Two-Way Data Binding

v-model creates a convenient two-way connection between compatible form controls and component state.

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

<script>
export default {
  data() {
    return {
      name: "Alice"
    };
  }
};
</script>

Typing John updates name, which immediately changes the paragraph to Hello, John.

How v-model works

On a text input, v-model is a shorthand for binding the value property and listening for input events. Vue provides appropriate value/event combinations for checkboxes, radio buttons, selects, and components.

<input
  :value="name"
  @input="name = $event.target.value"
>

One-Way vs Two-Way Binding

One-way: State → User Interface
Two-way: State ↔ Form Control

Real-life example

A profile form can bind a name input with v-model and render a live preview through interpolation. As Rahul is typed, the preview updates to Welcome, Rahul! without a page refresh.

Benefits of Data Binding

• Automatically synchronizes UI with state
• Reduces manual DOM manipulation
• Keeps related interface values consistent
• Makes components easier to read and maintain
• Simplifies interactive forms and live previews

Common beginner mistakes

• Forgetting to define a bound property
• Misspelling a property name
• Using interpolation inside attributes
• Confusing v-bind with v-model
• Using v-model on unsupported elements
• Mutating a prop through v-model instead of emitting an update

Best practices

• Use interpolation for text
• Use : for dynamic attributes
• Use v-model for form controls
• Choose clear state names
• Keep complex expressions out of templates
• Prefer computed properties for derived display values
• Keep data flow explicit between components

Key takeaways

• Data binding connects state and the UI
• Interpolation renders escaped text
• v-bind handles attributes, classes, and styles
• v-model synchronizes form state
• One-way binding flows from state to UI
• Two-way binding also captures user input
• Reactive bindings help build responsive interfaces with less code