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

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

Допрацюйте відповідь до «Чим директиви відрізняються від звичайних HTML-атрибутів?». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

Директиви Vue і звичайні HTML-атрибути виглядають схоже (обидва - атрибути в розмітці), але **працюють абсолютно по-різному**. Ось чітке пояснення, яке добре звучить на співбесіді.

---

## Головна відмінність

#### HTML-атрибути - це статичні властивості елемента.

Вони просто задають фіксоване значення: `id`, `class`, `href`, `disabled`, `value` тощо.

#### Директиви Vue - це динамічні інструкції.

Вони говорять фреймворку **як оновлювати DOM залежно від стану даних**.

---

## Детальні відмінності

### 1. Директиви - реактивні, HTML-атрибути - ні

HTML-атрибут задає значення один раз:

```javascript
<input value="Hello">
```

Якщо значення в JavaScript зміниться - HTML-атрибут не оновиться.

Vue-директива реагує на зміни даних:

```javascript
<input :value="message">
```

```javascript
message = 'New value' // DOM оновиться автоматично
```

---

### 2. Директиви виконують логіку, а не просто задають властивості

HTML-атрибут не може:

- показувати/приховувати елемент умовно
- рендерити списки
- слухати події з реактивним контекстом
- оновлюватися автоматично

Директиви можуть:

```javascript
<div v-if="isLoggedIn">Ласкаво просимо!</div>
<button @click="logout">Вийти</button>
<li v-for="item in list">{{ item }}</li>
```

Це не просто атрибути - це **інструкції шаблонного рушія Vue**.

---

### 3. У директив є життєвий цикл і логіка роботи з DOM

Звичайні HTML-атрибути - просто текст.

Користувацька директива може виконувати JavaScript:

```javascript
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});
```

---

### 4. HTML-атрибути працюють у чистому HTML, директиви - тільки всередині Vue

Цей код валідний у звичайному HTML:

```javascript
class="button"
disabled
```

Але директиви з `v-` працюють **тільки у Vue-шаблоні**:

```javascript
v-if="show"
v-model="value"
v-for="item in list"
```

Якщо вставити такий код у звичайний HTML - це буде просто рядок, без логіки

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

Для рев’юера

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

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