Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які вбудовані директиви існують у Vue?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)У Vue є набір **вбудованих директив**, які покривають основні задачі: рендеринг, події, роботу з формами, динамічні атрибути, списки тощо. **Ключове:** основні з них - `v-bind`, `v-model`, `v-if`/`v-else-if`/`v-else`, `v-show`, `v-for`, `v-on`, `v-slot`, `v-html`, `v-text`, `v-pre`, `v-cloak` і `v-once`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняУ Vue є набір **вбудованих директив**, які покривають основні задачі: рендеринг, події, роботу з формами, динамічні атрибути, списки тощо. Нижче - повний список **актуальних вбудованих директив Vue 3** + короткий опис кожної. --- ## Основні вбудовані директиви Vue ### 1. `v-bind` Динамічна прив'язка атрибутів і props. ```javascript <img :src="imageUrl"> ``` Аналогічно: ```javascript v-bind:class="classes" v-bind:id="elemId" ``` --- ### 2. `v-model` Двостороння прив'язка даних (input, select, textarea, компоненти). ```javascript <input v-model="name"> ``` Модифікатори: - `.lazy` - `.trim` - `.number` --- ### 3. `v-if`**,** `v-else-if`**,** `v-else` Умовний рендеринг (елемент повністю видаляється з DOM). ```javascript <div v-if="ok">OK</div> <div v-else-if="maybe">Maybe</div> <div v-else>No</div> ``` --- ### 4. `v-show` Показує/приховує елемент через CSS `display`. ```javascript <div v-show="visible">З'являюся без видалення з DOM</div> ``` --- ### 5. `v-for` Рендер списків. ```javascript <li v-for="(item, index) in items" :key="index"> {{ item }} </li> ``` --- ### 6. `v-on` (`@`) Обробники подій. ```javascript <button @click="handleClick">Click</button> ``` Модифікатори: `.stop`, `.prevent`, `.once`, `.self`, `.capture`, `.passive`. --- ### 7. `v-slot` Використовується для оголошення слотів у компонентах. ```javascript <template v-slot:header> Заголовок </template> ``` Скорочення для default slot: ```javascript <template #default> ``` --- ### 8. `v-html` Вставляє HTML як рядок. **Небезпечно** (XSS). ```javascript <div v-html="rawHtml"></div> ``` --- ### 9. `v-text` Дозволяє виводити текст (рідко використовується, оскільки простіше написати `{{ }}`). ```javascript <p v-text="message"></p> ``` --- ### 10. `v-pre` Пропускає вирази Vue і виводить їх як є. Прискорює рендер. ```javascript <div v-pre>{{ не інтерполюється }}</div> ``` --- ### 11. `v-cloak` Приховує елемент, доки Vue не ініціалізується. Зазвичай використовується з CSS: ```javascript <div v-cloak>{{ message }}</div> <style> [v-cloak] { display: none; } </style> ``` --- ### 12. `v-once` Рендерить елемент **один раз**, без оновлень. ```javascript <p v-once>{{ timestamp }}</p> ``` --- ## Підсумковий список директив Vue (Vue 3) | Директива | Призначення | |---|---| | `v-bind` | динамічна прив'язка атрибутів | | `v-model` | двостороння прив'язка | | `v-if`, `v-else-if`, `v-else` | умовний рендеринг | | `v-show` | приховування/показ через CSS | | `v-for` | рендер списків | | `v-on` | обробка подій | | `v-slot` | робота зі слотами | | `v-html` | вставка HTML | | `v-text` | вставка тексту | | `v-pre` | пропуск компіляції | | `v-cloak` | приховування до монтування | | `v-once` | одноразовий рендер |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.