Основні директиви у Vue.js

Vue.js використовує директиви — спеціальні атрибути, які контролюють поведінку DOM-елементів. Вони дозволяють динамічно змінювати розмітку, управляти подіями, прив'язувати дані та виконувати інші важливі завдання.

v-if / v-else / v-else-if

Ці директиви використовуються для умовного рендеринг елементів залежно від стану програми.

jsx

<template>
  <p v-if="isLoggedIn">Welcome!</p>
  <p v-else>Please log in.</p>
</template>

<script setup>
import { ref } from 'vue';

const isLoggedIn = ref(false);
</script>

v-if відображає елемент лише якщо isLoggedIn є true.
v-else показує, якщо isLoggedIn є false.
ref(false) створює реактивний стан, який можна змінювати.

v-for

Дозволяє відображати дані масиву, динамічно створюючи елементи.

jsx

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';

const items = ref(['Apple', 'Banana', 'Orange']);
</script>

v-for ітерує по масиву items, створюючи <li> для кожного елемента.
:key="index" допомагає Vue ефективно оновлювати список.

Не зловживайте v-if всередині v-for:

Це може призвести до низької продуктивності. Краще відфільтрувати дані перед їх рендерингм.

v-bind

Дозволяє динамічно змінювати атрибути елементів, наприклад, src, class, style та інші.

jsx

<template>
  <img v-bind:src="imageUrl" alt="Image" />
</template>

v-bind:src="imageUrl" динамічно змінює джерело зображення.

Скоротіть v-bind:

Замість v-bind:src="imageUrl" ви можете написати :src="imageUrl".

v-model

Дозволяє прив'язувати дані до елементів форм.

jsx

<template>
  <input v-model="text" placeholder="Enter text" />
  <p>You entered: {{ text }}</p>
</template>

v-model прив'язує text до <input>, автоматично оновлюючи <p>.

Будьте обережні з v-model:

Для примітивних значень (рядок, число) працює без проблем.
Для об'єктів та масивів краще робити копії, щоб уникнути несподіваних змін.

v-on

Використовується для додавання обробників подій, подібно до addEventListener.

jsx

<template>
  <button v-on:click="sayHello">Click me</button>
</template>

<script setup>
const sayHello = () => {
  alert('Hello, world!');
};
</script>

v-on:click="sayHello" додає обробник кліку.
sayHello() викликається, коли кнопка натискається.

Скоротіть v-on:

Замість v-on:click="sayHello" ви можете написати @click="sayHello".

v-show

Відрізняється від v-if, оскільки приховує елемент, використовуючи display: none, а не видаляє його з DOM.

jsx

<template>
  <p v-show="isVisible">This text can be hidden.</p>
</template>

v-show="isVisible" контролює видимість через display: none.
isVisible = false просто приховує елемент, не видаляючи його з DOM.

Використовуйте v-if та v-show залежно від ситуації:

Якщо елемент часто прихований і показується, краще використовувати v-show, оскільки він просто змінює display: none.
Якщо елемент рідко потрібен, краще v-if, оскільки він повністю видаляє елемент з DOM.

Резюме

Директиви Vue.js — потужний інструмент для управління розміткою та поведінкою елементів на сторінці. Вони допомагають зробити код чистішим, зручнішим та читабельнішим.

Використовуючи директиви, ви можете легко управляти рендерингм, обробкою подій, прив'язкою даних та списками. Розуміння цих ключових директив значно полегшить розробку на Vue.js та зробить ваш код більш ефективним.

Зміст

v-if / v-else / v-else-if v-for v-bind v-model v-on v-show Резюме

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

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

Premium

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

Дочитали статтю?

Практика завдань