Що таке директиви Vue?
Директиви 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 (небезпечно!) |
Простий приклад
<div id="app">
<p v-if="isVisible">Привіт!</p>
<input v-model="message" />
<button @click="toggle">Показати/приховати</button>
<p v-bind:title="message">
Наведи на мене - побачиш message
</p>
</div>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
const app = Vue.createApp({});
app.directive('focus', {
mounted(el) {
el.focus();
}
});І використання:
<input v-focus />Життєвий цикл директиви (Vue 3)
У користувацької директиви є хуки:
| Хук | Коли викликається |
|---|---|
created | під час створення директиви |
beforeMount | перед монтуванням у DOM |
mounted | після вставки в DOM |
beforeUpdate | перед оновленням VDOM |
updated | після оновлення |
beforeUnmount | перед видаленням |
unmounted | після видалення |
Підсумок
Директиви - це механізм Vue для керування DOM. Вони дозволяють:
- прив'язувати дані до атрибутів,
- слухати події,
- показувати/приховувати елементи,
- повторювати елементи списком,
- керувати вводом,
- писати власну DOM-логіку.
Якщо на співбесіді запитають, можна коротко відповісти:
«Директиви - це атрибути виду
v-, які дозволяють керувати DOM у шаблоні. Vue має стандартні директиви і дозволяє створювати користувацькі для кастомної поведінки елементів.»
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.