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

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

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

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

Контент

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

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

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

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

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

**Директиви Vue** - це спеціальні атрибути в шаблоні, які дозволяють «прив'язувати» логіку до DOM-елементів і керувати їхньою поведінкою.
Вони завжди починаються з префікса `v-`.

Простіше кажучи: **директиви - це спосіб сказати Vue, що робити з елементом у шаблоні.**

---

## Стандартні директиви Vue

Ось найпоширеніші:

| Директива | Що робить |
|---|---|
| `v-bind` | Зв'язує значення з атрибутами (динамічні атрибути) |
| `v-model` | Двостороннє прив'язування даних |
| `v-if / v-else / v-else-if` | Умовний рендеринг |
| `v-show` | Показ/приховування через CSS `display` |
| `v-for` | Цикл для списків |
| `v-on` (`@`) | Прив'язування подій |
| `v-slot` | Робота зі слотами в компонентах |
| `v-html` | Вставляє HTML (небезпечно!) |

---

## Простий приклад

```javascript
<div id="app">
  <p v-if="isVisible">Привіт!</p>

<button @click="toggle">Показати/приховати</button>

<p v-bind:title="message">
    Наведи на мене - побачиш message
  </p>
</div>
```

```javascript
const app = Vue.createApp({
  data() {
    return {
      isVisible: true,
      message: "Hello Vue"
    }
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
}).mount('#app');
```

---

## Навіщо потрібні користувацькі директиви?

Vue надає базовий набір, але іноді потрібно керувати DOM вручну:

- автофокус поля вводу;
- маски вводу (наприклад, телефону);
- анімації;
- робота із зовнішніми бібліотеками (наприклад, tooltip, drag&drop).

Для цього створюються **кастомні директиви**.

### Приклад власної директиви `v-focus`

```javascript
const app = Vue.createApp({});

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

І використання:

```javascript
<input v-focus />
```

---

## Життєвий цикл директиви (Vue 3)

У користувацької директиви є хуки:

| Хук | Коли викликається |
|---|---|
| `created` | під час створення директиви |
| `beforeMount` | перед монтуванням у DOM |
| `mounted` | після вставки в DOM |
| `beforeUpdate` | перед оновленням VDOM |
| `updated` | після оновлення |
| `beforeUnmount` | перед видаленням |
| `unmounted` | після видалення |

---

## Підсумок

**Директиви - це механізм Vue для керування DOM.**
Вони дозволяють:

- прив'язувати дані до атрибутів,
- слухати події,
- показувати/приховувати елементи,
- повторювати елементи списком,
- керувати вводом,
- писати власну DOM-логіку.

Якщо на співбесіді запитають, можна коротко відповісти:

> «Директиви - це атрибути виду `v-`, які дозволяють керувати DOM у шаблоні. Vue має стандартні директиви і дозволяє створювати користувацькі для кастомної поведінки елементів.»

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

Для рев’юера

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

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