Синтаксис шаблонов

Petite-Vue применяет декларативный подход к связыванию данных и управлению состоянием через атрибуты HTML. Шаблоны остаются валидной разметкой, без необходимости предварительной компиляции или отдельных файлов.

Reactivity через v-scope

v-scope задаёт контекст, из которого шаблон получает данные и методы. Объект, переданный атрибуту, становится источником реактивных свойств. Изменение значения приводит к обновлению соответствующих узлов DOM.

Пример:

<div v-scope="{ count: 0, inc() { this.count++ } }">
  <button @click="inc">+</button>
  {{ count }}
</div>

Ключевой момент: данные принадлежат DOM-узлу, а не глобальной области.

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

Выражения внутри двойных фигурных скобок вычисляются в контексте текущего v-scope. Поддерживаются арифметика, доступ к свойствам, вызов методов. Интерполяции выполняются односторонне: значение отображается, но не изменяет исходное состояние.

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

Директивы атрибутов

v-bind и сокращение :

v-bind связывает значение атрибута с выражением. Применяется к нативным HTML-атрибутам, классам и стилям.

<img :src="avatarUrl" :alt="user.name">

При обновлении данных атрибуты получают новое значение без манипуляций через JavaScript.

v-text и v-html

v-text вставляет текстовый узел, избегая интерполяций. v-html вставляет HTML-фрагмент как DOM-структуру. Использование v-html требует аккуратности из-за потенциальной возможности внедрения небезопасного содержимого.

v-show и v-if

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

<div v-if="visible">...</div>
<div v-show="visible">...</div>

v-on и сокращение @

v-on привязывает обработчики событий. Поддерживаются нативные события браузера и выражения с доступом к состоянию.

<button @click="toggle">Переключить</button>

Методы вызываются в контексте текущего v-scope.

Выражения внутри директив

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

Допустимые примеры:

<span :class="active ? 'on' : 'off'"></span>
<span>{{ price * count }}</span>

Циклы v-for

v-for повторяет элемент для каждой сущности в коллекции. Синтаксис ближе к Vue, но сохраняет компактность Petite-Vue.

<li v-for="item in list">{{ item }}</li>

Ключевым аспектом является то, что v-for создает контекст для каждой итерации, предоставляя доступ к текущему значению и индексу.

Двустороннее связывание v-model

v-model обеспечивает синхронизацию значения формы и свойства состояния. Применимо для input, textarea, select и пользовательских сценариев.

<input v-model="title">

При вводе символов свойство title обновляется автоматически, а любые изменения title отражаются в интерфейсе.

Модификаторы событий

События могут использовать модификаторы: prevent, stop, once, self и другие. Они управляют поведением обработчиков без дополнительного JavaScript.

<form @submit.prevent="save">

Модификатор prevent предотвращает стандартное поведение события.

Условные цепочки и вычисления

В шаблонах допускается использование вычисляемых свойств через методы v-scope. Комбинация вычислений в атрибутах и интерполяциях делает синтаксис компактным, сохраняя выразительность.

Отсутствие шаблонных компиляторов

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

Особенности вложенности

Контекст v-scope не переопределяет контексты дочерних узлов автоматически. При вложении создаются независимые области. Это позволяет разделять логику между компонентами без явной системы компонентов.

Работа с классами и стилями

Для class и style поддерживаются объектный и массивный синтаксисы, подобные Vue:

<div :class="{ active, disabled: !enabled }"></div>
<div :style="{ color: textColor, fontSize: size + 'px' }"></div>

Такой подход обеспечивает декларативное формирование стилей на основе состояния.

Комбинация директив

Несколько директив могут применяться одновременно. Например: v-for с v-bind и обработчиком событий. Важно соблюдать лаконичность выражений; тяжёлая логика помещается внутрь методов.

Принцип минимализма

Синтаксис шаблонов Petite-Vue следует принципу минимальных надстроек над HTML. Главная цель — предоставить реактивность и декларативность без расширения языка разметки. Это проявляется в компактности директив, ограниченности выражений и прямой работе с DOM без виртуального слоя.

Оглавление