Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке директива?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Директива** - це спеціальний атрибут, який додає поведінку або логіку елементу в шаблоні Vue. **Ключове:** вона пов'язує DOM і реактивні дані компонента, вказуючи Vue, що робити при зміні даних.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Директива** - це спеціальний атрибут, який додає **поведінку або логіку** елементу в шаблоні Vue. Вона **пов'язує DOM і реактивні дані компонента**, вказуючи Vue, *що робити при зміні даних*. --- ## 1. Приклад простої директиви ```javascript <template> <p v-if="isVisible">Цей текст відображається, коли isVisible = true</p> </template> <script setup> import { ref } from 'vue' const isVisible = ref(true) </script> ``` Тут `v-if` - директива. Вона каже Vue: **якщо** `isVisible` **істинне - встав елемент у DOM, інакше прибери його.** --- ## 2. Загальний синтаксис директив ```javascript v-директива:параметр.модифікатор="вираз" ``` - `v-директива` - ім'я директиви - `:параметр` - додатковий аргумент - `.модифікатор` - уточнення поведінки - `"вираз"` - значення або логіка, з якою працює директива Приклад: ```javascript <a v-bind:href="link" v-on:click.prevent="handleClick">Посилання</a> ``` Тут: - `v-bind:href="link"` -> динамічно підставляє значення `link` - `v-on:click.prevent` -> слухає клік і запобігає стандартній дії браузера --- ## 3. Основні вбудовані директиви Vue | Директива | Призначення | |---|---| | `v-bind` або `:` | Прив'язує значення до атрибута елемента | | `v-on` або `@` | Прив'язує обробник події | | `v-if`, `v-else`, `v-else-if` | Умовний рендеринг | | `v-show` | Показує/приховує елемент через CSS (`display: none`) | | `v-for` | Перебирає список (аналог циклу) | | `v-model` | Двостороння прив'язка даних (input ↔ стан) | | `v-html` | Вставляє HTML як вміст елемента | | `v-text` | Вставляє текст в елемент | | `v-slot` | Для роботи зі слотами в компонентах | | `v-pre`, `v-once` | Оптимізація рендеру (не оновлювати/пропустити компіляцію) | --- ## 4. Приклад використання кількох директив ```javascript <template> <div v-if="user" v-bind:class="{ active: isActive }"> <p v-text="user.name"></p> <input v-model="user.email" /> <button @click="isActive = !isActive">Перемкнути активність</button> </div> </template> <script setup> import { reactive, ref } from 'vue' const isActive = ref(false) const user = reactive({ name: 'Oleh', email: 'oleh@example.com' }) </script> ``` --- ## 5. Користувацькі директиви Ви можете створювати **власні директиви**, якщо потрібно керувати поведінкою DOM напряму. ```javascript app.directive('focus', { mounted(el) { el.focus() } }) ``` ```javascript <input v-focus /> ``` При монтуванні елемента Vue викличе функцію `mounted` і автоматично встановить фокус на поле введення. --- ## Підсумок > **Директива у Vue.js** - це механізм, який додає реактивну поведінку HTML-елементам. > > Вона повідомляє Vue, **як потрібно оновити DOM**, коли дані змінюються. > > Є вбудовані директиви (`v-if`, `v-for`, `v-bind`, `v-model` та ін.), > і ви можете **створювати власні** для унікальних сценаріїв (наприклад, автофокус, lazy-load тощо).Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.