Suggest an edit

Improve this article

Refine the answer for “Data and UI Binding”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

In Vue.js, the template (`<template>`) is **reactively bound** to the component's data.
This means: when you change a value in `data()`, `ref()`, or `reactive()`, the interface **automatically updates** without manual DOM manipulation.

---

## 1. How data binding works

Vue implements a **two-way data binding** mechanism (*data binding*):

- **From code -> to template**: data from the component is automatically displayed in the DOM.
- **From template -> to code** (for example, when typing text into an `input`): the user's changes can automatically update the data in the component (via `v-model`).

---

## 2. One-way binding (Data -> Template)

### Example:

```javascript
<template>
  <h1>Hello, {{ name }}!</h1>
</template>

const name = ref('Oleh')
</script>
```

Here:

- `{{ name }}` - **interpolation** (substituting data into the template);
- `ref('Oleh')` makes `name` reactive;
- if you change `name.value = 'Bob'`, Vue itself updates the text on the page.

---

## 3. Attribute binding (`v-bind`)

The `v-bind:` directive (or `:` for short) is used to dynamically change HTML attributes.

```javascript
<template>
  <img :src="avatarUrl" :alt="userName" />
</template>

const avatarUrl = ref('/images/user.png')
const userName = ref('Oleh')
</script>
```

> `v-bind` binds the attribute to a variable's value and updates the DOM on changes.

---

## 4. Event handling (`v-on`)

The `v-on:` directive (or `@` for short) is used to connect data and actions.

```javascript
<template>
  <button @click="increment">Counter: {{ count }}</button>
</template>

const count = ref(0)
function increment() {
  count.value++
}
</script>
```

When the user clicks the button, a function is called that changes `count`, and Vue automatically updates the text in the template.

---

## 5. Two-way binding (`v-model`)

If data and interface changes need to happen **in both directions** (for example, when typing text), `v-model` is used.

```javascript
<template>
  <input v-model="message" placeholder="Enter text" />
  <p>You entered: {{ message }}</p>
</template>

When `message` changes -> the `input` updates.
When text is typed into the `input` -> `message` updates.

---

## 6. What Vue does "under the hood"

- Vue creates **reactive references** to data (`ref`, `reactive`).
- The template compiles into a **render function**.
- When data changes, Vue:
  1. Marks the component as "dirty" (needs an update),
  2. Recomputes the template via the Virtual DOM,
  3. Finds the differences and **surgically updates the real DOM**.

---

## Summary

> In Vue.js, the template and the component's data are bound reactively:
>
> - through **interpolations (**`{{ }}`**)** for outputting values,
> - `v-bind` for dynamic attributes,
> - `v-on` for events,
> - `v-model` for two-way binding.
>
> When the state changes, Vue **automatically updates the interface**, without manual DOM manipulation.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts467 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.