Встроенные директивы: полный обзор

Vue.js предоставляет мощный набор встроенных директив, которые позволяют управлять DOM-элементами напрямую из шаблонов. Директивы начинаются с префикса v- и представляют собой специальные атрибуты, которые связывают данные с поведением элементов.

Директива v-if, v-else-if, v-else

v-if используется для условного рендеринга элементов. Элемент с этой директивой добавляется в DOM только при выполнении указанного условия.

<div v-if="isLoggedIn">Вы вошли в систему</div>
<div v-else>Пожалуйста, войдите</div>
  • v-else-if позволяет создавать цепочки условий, аналогичные else if в JavaScript.
  • v-else обязательно следует сразу за v-if или v-else-if и рендерится, если все предыдущие условия ложны.
  • Условные блоки полностью управляют добавлением или удалением элемента из DOM, что отличается от v-show, который лишь изменяет CSS-свойство display.

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

v-show управляет видимостью элемента с помощью CSS.

<div v-show="isVisible">Этот блок можно скрыть</div>
  • Элемент всегда присутствует в DOM.
  • Меняется только свойство display.
  • Подходит для часто переключаемых элементов, где важно избегать постоянного удаления и добавления в DOM.

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

v-for используется для рендеринга списков и массивов.

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
  • Синтаксис: v-for="(item, index) in array" или v-for="(value, key) in object".
  • :key необходим для оптимизации рендеринга и правильного отслеживания элементов при изменении данных.
  • Можно использовать с компонентами для динамического создания множества экземпляров.

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

v-bind связывает атрибуты элемента с данными компонента.

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

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

v-model обеспечивает двустороннее связывание данных для форм.

<input v-model="username" placeholder="Введите имя">
  • Автоматически обновляет значение переменной при изменении поля ввода.
  • Работает с <input>, <textarea>, <select> и кастомными компонентами.
  • Можно использовать модификаторы: .lazy, .number, .trim.
<input v-model.lazy="username">
<input v-model.number="age">
<input v-model.trim="comment">

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

v-on используется для привязки событий к методам компонента.

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

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

  • Позволяет использовать любые DOM-события: @mouseover, @keydown, @submit.

  • Поддерживает модификаторы для управления поведением события:

    • .prevent – предотвращает стандартное действие.
    • .stop – останавливает всплытие.
    • .capture, .self, .once, .passive.
<form @submit.prevent="submitForm"></form>
<button @click.stop="doSomething"></button>

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

v-pre отключает реактивность для указанного блока и рендерит его как сырой текст.

<span v-pre>{{ thisWillNotBeRendered }}</span>
  • Полезно для вывода больших шаблонов без их компиляции.
  • Снижает нагрузку на рендеринг при работе с неподвижным содержимым.

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

v-cloak используется для скрытия содержимого до момента, когда Vue полностью инициализировал компонент.

<div v-cloak>{{ message }}</div>
  • Совместно с CSS:
[v-cloak] { display: none; }
  • Эффективно устраняет видимость шаблонных выражений до завершения инициализации.

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

v-once рендерит элемент только один раз и больше не отслеживает изменения данных.

<span v-once>{{ message }}</span>
  • Подходит для статического контента.
  • Позволяет снизить нагрузку на виртуальный DOM, если обновления не требуются.

Директива v-text и v-html

  • v-text заменяет содержимое элемента текстом без интерполяции HTML.
<p v-text="plainText"></p>
  • v-html позволяет вставлять HTML-содержимое.
<div v-html="rawHtml"></div>
  • Использование v-html требует осторожности: необходимо избегать вставки непроверенного HTML, чтобы предотвратить XSS-атаки.

Сочетание директив

Директивы могут комбинироваться для достижения сложной логики:

<ul>
  <li v-for="item in items" v-if="item.visible" :key="item.id">{{ item.name }}</li>
</ul>
  • В этом примере элементы списка рендерятся только если item.visible истинно.
  • Порядок применения директив важен: сначала v-for, затем v-if.

Особенности работы встроенных директив

  • Все встроенные директивы реактивны и тесно интегрированы с системой данных Vue.
  • Обновление DOM происходит оптимизировано с помощью виртуального DOM.
  • Некоторые директивы (v-if vs v-show) имеют различную производительность в зависимости от сценариев использования: динамическая замена элементов или частое переключение видимости.

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

Оглавление