Що таке директива?
Директива - це спеціальний атрибут, який додає поведінку або логіку елементу в шаблоні Vue. Вона пов'язує DOM і реактивні дані компонента, вказуючи Vue, що робити при зміні даних.
1. Приклад простої директиви
<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. Загальний синтаксис директив
v-директива:параметр.модифікатор="вираз"v-директива- ім'я директиви:параметр- додатковий аргумент.модифікатор- уточнення поведінки"вираз"- значення або логіка, з якою працює директива
Приклад:
<a v-bind:href="link" v-on:click.prevent="handleClick">Посилання</a>Тут:
v-bind:href="link"-> динамічно підставляє значенняlinkv-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. Приклад використання кількох директив
<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 напряму.
app.directive('focus', {
mounted(el) {
el.focus()
}
})<input v-focus />При монтуванні елемента Vue викличе функцію mounted і автоматично встановить фокус на поле введення.
Підсумок
Директива у Vue.js - це механізм, який додає реактивну поведінку HTML-елементам.
Вона повідомляє Vue, як потрібно оновити DOM, коли дані змінюються.
Є вбудовані директиви (
v-if,v-for,v-bind,v-modelта ін.), і ви можете створювати власні для унікальних сценаріїв (наприклад, автофокус, lazy-load тощо).
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.