Hack Frontend Community

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

Vue.js использует директивы — специальные атрибуты, которые управляют поведением элементов DOM. Они позволяют динамически изменять разметку, управлять событиями, связывать данные и выполнять другие важные задачи.

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

Эти директивы используются для условного отображения элементов в зависимости от состояния приложения.

<template>
  <p v-if="isLoggedIn">Добро пожаловать!</p>
  <p v-else>Пожалуйста, войдите в систему.</p>
</template>

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

const isLoggedIn = ref(false);
</script>
  • v-if отображает элемент, только если isLoggedIn истинно.
  • v-else показывается, если isLoggedIn ложно.
  • ref(false) создаёт реактивное состояние, которое можно изменять.

v-for

Позволяет отобразить массив данных, создавая элементы динамически.

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

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

const items = ref(['Яблоко', 'Банан', 'Апельсин']);
</script>
  • v-for перебирает массив items, создавая <li> для каждого элемента.
  • :key="index" помогает Vue эффективно обновлять список.

Не злоупотребляйте v-if внутри v-for:

Это может привести к низкой производительности. Лучше фильтровать данные перед их отображением.

v-bind

Позволяет динамически изменять атрибуты элементов, например, src, class, style и другие.

<template>
  <img v-bind:src="imageUrl" alt="Картинка" />
</template>
  • v-bind:src="imageUrl" динамически изменяет источник изображения.

Сокращайте v-bind:

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

v-model

Позволяет связывать данные с элементами формы.

<template>
  <input v-model="text" placeholder="Введите текст" />
  <p>Вы ввели: {{ text }}</p>
</template>
  • v-model связывает text с <input>, автоматически обновляя <p>.

Будьте осторожны с v-model:

  • Для примитивных значений (string, number) работает без проблем.
  • Для объектов и массивов лучше делать копии, чтобы избежать неожиданных изменений.

v-on

Используется для добавления обработчиков событий, аналогично addEventListener.

<template>
  <button v-on:click="sayHello">Нажми меня</button>
</template>

<script setup>
const sayHello = () => {
  alert('Привет, мир!');
};
</script>
  • v-on:click="sayHello" добавляет обработчик нажатия.
  • sayHello() вызывается при клике по кнопке.

Сокращайте v-on:

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

v-show

Отличается от v-if, так как скрывает элемент с помощью display: none, а не удаляет его из DOM.

<template>
  <p v-show="isVisible">Этот текст можно скрыть.</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 и сделает ваш код более эффективным.