Сокращенная запись атрибутов

Petite-Vue — это облегчённая версия Vue.js, ориентированная на простые сценарии и минимальный размер кода. Одним из ключевых элементов удобства работы с этой библиотекой является возможность использовать сокращённые записи атрибутов для привязки данных, событий и условий отображения. Эти сокращения делают код компактным и читаемым, сохраняя при этом всю функциональность реактивного фреймворка.

Директива v- и её сокращения

В стандартной Vue-подобной записи атрибуты привязки данных и событий выглядят так:

<div v-text="message"></div>
<input v-model="username">
<button v-on:click="submitForm">Отправить</button>

Petite-Vue поддерживает сокращённые формы этих директив:

  • v-text → :text Вывод текста напрямую из реактивного состояния:
<div :text="message"></div>
  • v-model → :model Двусторонняя привязка данных к элементам формы:
<input :model="username">
  • v-on:event → @event Обработчики событий сокращаются через @:
<button @click="submitForm">Отправить</button>

Эта запись экономит место и улучшает читаемость, особенно при большом количестве интерактивных элементов на странице.

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

Для динамических атрибутов HTML используется синтаксис :. Любой стандартный атрибут можно сделать реактивным:

<img :src="imageUrl" :alt="imageDescription">

В этом примере src и alt автоматически обновляются при изменении значений imageUrl и imageDescription в реактивном состоянии компонента.

Условные отображения

Сокращённая запись для условного рендеринга упрощает работу с видимостью элементов. Вместо:

<div v-if="isVisible">Содержимое</div>

можно использовать:

<div :if="isVisible">Содержимое</div>

Аналогично, для циклического рендеринга массивов применяется :for:

<ul>
  <li :for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

Сокращения :if и :for полностью повторяют логику стандартных Vue-директив, но делают шаблон более лаконичным.

События с аргументами

Для передачи аргументов в обработчик события используется стандартный синтаксис Petite-Vue:

<button @click="addItem(item)">Добавить</button>

Если требуется передать событие DOM ($event), используется та же сокращённая запись:

<input @input="updateValue($event)">

Сокращённая форма не ограничивает использование встроенных объектов, сохраняя полную совместимость с привычными паттернами Vue.

Динамические классы и стили

Привязка классов и стилей через сокращённые атрибуты также поддерживается:

<div :class="{ active: isActive, hidden: !isVisible }"></div>
<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>

Сокращённые записи позволяют комбинировать статические и динамические значения без необходимости длинных выражений v-bind:class и v-bind:style.

Использование сокращений для сложных выражений

Любые сокращённые атрибуты поддерживают JavaScript-выражения, включая тернарные операторы и вызовы функций:

<div :text="isAdmin ? 'Администратор' : 'Пользователь'"></div>
<img :src="getAvatarUrl(userId)">

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

Совместное использование сокращённых и полных директив

Petite-Vue допускает одновременное использование сокращённых и стандартных директив:

<div :text="message" v-show="isVisible"></div>

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

Преимущества сокращённой записи

  • Компактность кода: сокращённые атрибуты уменьшают объём шаблона, делая его проще для восприятия.
  • Читаемость: ключевые операции выделяются символами : и @, что сразу показывает связь с реактивными данными и событиями.
  • Универсальность: полностью совместимы с реактивностью и жизненным циклом компонентов Petite-Vue.
  • Гибкость: допускается смешивание сокращённой и полной формы без потери функциональности.

Сокращённая запись атрибутов — это инструмент, который облегчает работу с Petite-Vue, делая шаблоны чистыми, лаконичными и удобными для поддержки.

Оглавление