Урок 1 · Vue

Директивы Vue: данные в разметке

Директивы — специальные атрибуты Vue. С их помощью можно показать значение, скрыть блок или вывести список прямо из данных.

Вывести значение

<script setup>
const title = 'Мой список'
</script>

<h1>{{ title }}</h1>

Двойные фигурные скобки выводят значение переменной в шаблон.

Показать блок по условию

<p v-if="isReady">
  Можно начинать урок.
</p>

Если isReady равно true, абзац будет на странице. Если нет — Vue его не покажет.

Условие и показ — разные директивы

v-if не создаёт блок, пока условие ложно. v-show только прячет его стилем, а разметка остаётся. Для редкого сообщения об ошибке подходит v-if. Для вкладки, которую часто переключают и которая хранит внутреннее состояние, чаще спокойнее v-show.

Не вешай v-if и v-for на один элемент. Сначала отфильтруй список в вычисляемом свойстве, потом выведи его циклом. Так проще понять и порядок, и ключи.

<p v-if="error">{{ error }}</p>
<ul>
  <li v-for="item in visibleItems" :key="item.id">
    <label>
      <input type="checkbox" v-model="item.done">
      {{ item.title }}
    </label>
  </li>
</ul>

Привязка атрибутов

Обычный атрибут без двоеточия — всегда строка. :disabled="seats === 0" передаёт логическое значение. Класс удобно собирать объектом: активными станут те ключи, чьё значение истинно. Не склеивай длинную классовую строку вручную в трёх местах.

Событие пишется как @click или @submit.prevent. Модификатор prevent вызывает preventDefault, чтобы форма не перезагружала страницу. Это читаемее, чем помнить про метод события в каждом обработчике.

Ключи и поля

• У v-for есть стабильный :key, и это не индекс, если список сортируют.
• v-model на флажке пишет логическое значение, а не строку.
• Несколько v-model на разных полях не делят одно состояние.
• Директива не заменяет функцию там, где расчёт уже на десять строк. Вынеси его в computed.

<button :disabled="loading" @click="loadLessons">
  {{ loading ? 'Загрузка…' : 'Показать уроки' }}
</button>
<ul v-if="lessons.length">
  <li v-for="lesson in lessons" :key="lesson.id">{{ lesson.title }}</li>
</ul>