Шаблонная система и директивы

Основы шаблонной системы

Шаблонная система Vue.js предоставляет возможность связывать данные с DOM-элементами декларативным способом. Основным механизмом является интерполяция, которая позволяет отображать данные внутри HTML с помощью двойных фигурных скобок {{ }}. Любое выражение JavaScript, доступное в текущем экземпляре Vue, может быть использовано внутри интерполяции.

const app = Vue.createApp({
  data() {
    return {
      message: 'Привет, Vue!'
    }
  }
});
app.mount('#app');
<div id="app">
  {{ message }}
</div>

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

Директивы

Директивы — это специальные атрибуты, начинающиеся с префикса v-, которые добавляют реактивное поведение к элементам HTML.

Основные директивы:

  • v-bind — связывает атрибуты элемента с данными. Позволяет динамически изменять значения атрибутов, классов, стилей.
<img v-bind:src="imageUrl" alt="Описание изображения">

Сокращённая запись: :src="imageUrl".

  • v-model — обеспечивает двустороннее связывание данных с элементами формы. Используется для синхронизации значения поля с состоянием приложения.
<input v-model="username" placeholder="Введите имя">
<p>Привет, {{ username }}!</p>
  • v-if, v-else-if, v-else — условное рендеринг элементов. Элемент добавляется или удаляется из DOM в зависимости от логического выражения.
<p v-if="isLoggedIn">Добро пожаловать!</p>
<p v-else>Пожалуйста, войдите в систему.</p>
  • v-show — управляет видимостью элемента через CSS-свойство display, без удаления элемента из DOM.
<p v-show="isVisible">Этот текст можно скрыть</p>
  • v-for — директива для циклического рендеринга массивов и объектов. Поддерживает индекс и ключ элемента для оптимизации обновлений DOM.
<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index + 1 }}. {{ item.name }}
  </li>
</ul>
  • v-on — привязка событий к элементам. Позволяет вызывать методы Vue при определённых событиях.
<button v-on:click="incrementCounter">Нажми меня</button>

Сокращённая запись: @click="incrementCounter".

Управление классами и стилями

Для динамического управления классами используется объектная или массивная синтаксис:

<div :class="{ active: isActive, disabled: isDisabled }"></div>
<div :class="[classA, classB]"></div>

Для стилей применяется директива v-bind:style:

<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>

Это позволяет изменять внешний вид элементов в зависимости от состояния приложения.

Директивы с аргументами и модификаторами

Аргументы (v-on:click.prevent) уточняют поведение директивы, а модификаторы (.prevent, .stop, .capture) позволяют управлять событиями и предотвращать стандартное поведение браузера:

<form @submit.prevent="submitForm">
  <input v-model="email" type="email">
  <button type="submit">Отправить</button>
</form>

Слоты и вложенные шаблоны

С помощью слотов шаблоны могут быть переиспользуемыми и динамическими. Основной слот вставляет содержимое между тегами компонента:

<card>
  <h2>Заголовок карточки</h2>
  <p>Содержимое карточки</p>
</card>

Во Vue-компоненте:

<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

Можно использовать именованные слоты для более сложных структур:

<slot name="header"></slot>
<slot name="footer"></slot>

Динамические компоненты

С помощью <component> и атрибута :is можно рендерить разные компоненты на основе данных:

<component :is="currentComponent"></component>

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

Итоговая структура шаблона

Шаблон Vue сочетает в себе:

  • Интерполяцию для отображения данных.
  • Директивы для реактивного управления DOM.
  • Динамические классы и стили.
  • Условный рендеринг и циклы.
  • Событийные обработчики через v-on.
  • Слоты и вложенные компоненты для повторного использования.

Эта система позволяет создавать гибкие, масштабируемые интерфейсы с минимальным количеством ручного DOM-кода и высокой реактивностью.

Оглавление