Які вбудовані директиви існують у Vue?

VueJunior~1 хв читання

У 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`	одноразовий рендер

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.