Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Зв'язок даних та UI». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

У Vue.js шаблон (`<template>`) **реактивно пов'язаний** з даними компонента.
Це означає: коли ви змінюєте значення в `data()`, `ref()` або `reactive()`, інтерфейс **автоматично оновлюється** без ручного втручання в DOM.

---

## 1. Принцип роботи зв'язку даних

Vue реалізує механізм **двостороннього зв'язування даних** (*data binding*):

- **З коду -> у шаблон**: дані з компонента автоматично відображаються в DOM.
- **З шаблону -> у код** (наприклад, при введенні тексту в `input`): зміни користувача можуть автоматично оновлювати дані в компоненті (через `v-model`).

---

## 2. Одностороннiй зв'язок (Data -> Template)

### Приклад:

```javascript
<template>
  <h1>Привіт, {{ name }}!</h1>
</template>

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

Тут:

- `{{ name }}` - **інтерполяція** (підстановка даних у шаблон);
- `ref('Oleh')` робить `name` реактивним;
- якщо змінити `name.value = 'Bob'`, Vue сам оновить текст на сторінці.

---

## 3. Прив'язка атрибутів (`v-bind`)

Для динамічної зміни HTML-атрибутів використовується директива `v-bind:` (або коротко `:`).

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

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

> `v-bind` зв'язує атрибут зі значенням змінної і оновлює DOM при змінах.

---

## 4. Обробка подій (`v-on`)

Для зв'язку даних і дій використовується директива `v-on:` (або коротко `@`).

```javascript
<template>
  <button @click="increment">Лічильник: {{ count }}</button>
</template>

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

Коли користувач клікає по кнопці, викликається функція, яка змінює `count`, а Vue автоматично оновлює текст у шаблоні.

---

## 5. Двостороннiй зв'язок (`v-model`)

Якщо потрібно, щоб зміни даних та інтерфейсу відбувалися **в обидва боки** (наприклад, при введенні тексту), використовується `v-model`.

```javascript
<template>
  <input v-model="message" placeholder="Введіть текст" />
  <p>Ви ввели: {{ message }}</p>
</template>

При зміні `message` -> оновлюється `input`.
При введенні тексту в `input` -> оновлюється `message`.

---

## 6. Що робить Vue "під капотом"

- Vue створює **реактивні посилання** на дані (`ref`, `reactive`).
- Шаблон компілюється у **функцію рендера**.
- При зміні даних Vue:
  1. Позначає компонент як "брудний" (потребує оновлення),
  2. Перераховує шаблон через Virtual DOM,
  3. Знаходить відмінності і **точково оновлює реальний DOM**.

---

## Підсумок

> У Vue.js шаблон і дані компонента пов'язані реактивно:
>
> - через **інтерполяції (**`{{ }}`**)** для виведення значень,
> - `v-bind` для динамічних атрибутів,
> - `v-on` для подій,
> - `v-model` для двостороннього зв'язування.
>
> При зміні стану Vue **автоматично оновлює інтерфейс**, без ручних маніпуляцій з DOM.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати417 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.