Vue 3 Composition API: Шаблоны и директивы с TypeScript

В этом уроке мы разберем основные шаблоны и директивы Vue 3, научимся работать с интерполяцией, условным рендерингом и списками. Все примеры используют Composition API и TypeScript — самые современные подходы во Vue-разработке

Интерполяция {{ }}

Интерполяция — вывод данных в шаблон

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Счетчик: {{ counter }}</p>
  </div>
</template>

<script setup lang="ts">
const title: string = "Vue 3 + TypeScript";
const counter: number = 0;
</script>

Как это работает:

• Данные из <script setup> автоматически становятся доступными в шаблоне
• Vue отслеживает изменения переменных и обновляет DOM

Директива v-bind

Связывает атрибуты HTML с данными компонента

<template>
  <button 
    :class="{ active: isActive }" 
    :disabled="isDisabled"
  >
    Нажми меня
  </button>
</template>

<script setup lang="ts">
const isActive: boolean = true;
const isDisabled: boolean = false;
</script>

Ключевые моменты:

• Сокращенная запись :class вместо v-bind:class
• Можно передавать объекты, массивы или строки

Директива v-model

Двустороннее связывание для форм

<template>
  <input v-model="message" placeholder="Введите текст">
  <p>Вы ввели: {{ message }}</p>
</template>

<script setup lang="ts">
const message: string = "";
</script>

Для кастомных компонентов

defineProps<{ modelValue: string }>();
defineEmits<{ (e: 'update:modelValue', value: string): void }>();

Условный рендеринг (v-if vs v-show)

v-if - полностью удаляет/добавляет элемент из DOM

<template>
  <div v-if="isVisible">Виден только если isVisible = true</div>
</template>

<script setup lang="ts">
const isVisible: boolean = true;
</script>

v-show - переключает CSS-свойство display

<template>
  <div v-show="isVisible">Скрыт через display: none</div>
</template>

Когда что использовать:

• v-if — для дорогих элементов (например, тяжелые компоненты)
• v-show — для частых переключений (например, табы)

Работа со списками (v-for)

Работает как обычный цикл только в шаблоне

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

<script setup lang="ts">
interface Item {
  id: number;
  name: string;
}

const items: Item[] = [
  { id: 1, name: "Vue" },
  { id: 2, name: "TypeScript" }
];
</script>

Важные моменты:

• Всегда указывайте :key для стабильного рендера
• Используйте интерфейсы для типизации данных

Заключение

• {{ }} — вывод данных в шаблон
• v-bind — динамические атрибут
• v-model — двустороннее связывание
• v-if/v-show — условный рендеринг
• v-for — рендер списков (не забываем про :key)

Домашнее задание

• Создайте компонент списка дел с v-for и интерфейсом Todo
• Реализуйте переключение тем (светлая/темная) через v-bind:class
• Добавьте модальное окно, которое показывается по v-if