Синтаксис шаблонов в Vue предоставляет удобный способ связывать визуальное представление с данными. Шаблоны в Vue являются допустимым HTML, который браузеры и анализаторы могут понимать.

Vue компилирует шаблоны в оптимизированный JavaScript-код. Вместе с системой реактивности Vue умно определяет, какие компоненты нужно обновлять при изменении состояния приложения, и минимизирует манипуляции с DOM

Привязка данных в шаблонах осуществляется с помощью интерполяции текста в двойных фигурных скобках:

Выражение в фигурных скобках будет заменено значением свойства msg соответствующего объекта данных и будет автоматически обновляться при изменении этого свойства.

Можно также использовать интерполяцию однократно, когда значение не будет обновляться при изменении данных, с помощью директивы v-once

Vue также позволяет рендерить сырой HTML-код с помощью директивы v-html

Однако, следует быть осторожным при использовании v-html, так как динамическая отрисовка произвольного HTML-кода может привести к уязвимостям безопасности. Рекомендуется использовать v-html только для доверенного кода, не создаваемого пользователями.

Для привязки атрибутов HTML используется директива v-bind, так как синтаксис двойных фигурных скобок не работает в атрибутах. Например:

Директива v-bind предписывает Vue синхронизировать атрибут элемента idсо свойством компонента dynamicId. Если связанное значение равно null или undefined, атрибут будет удален из отображаемого элемента.

Поскольку v-bind так часто используется, у него есть специальный сокращенный синтаксис:

Подробнее про привязку атрибутов читайте в нашей главе тут

Логические атрибуты, такие как disabled, могут быть привязаны с помощью v-bind

Атрибут disabled будет включен, если isButtonDisabled имеет истинное значение. Если у вас есть объект JavaScript, представляющий несколько атрибутов, который выглядит следующим образом:

Эти выражения будут оцениваться как JavaScript в области данных текущего экземпляра компонента.

Каждая привязка может содержать только одно выражение . Выражение — это фрагмент кода, которому можно вычислить значение. Простая проверка: можно ли его использовать после return. Поэтому НЕ будет работать следующее :

Vue предоставляет ряд встроенных директив, в том числе v-html и v-bind которые мы представили выше.

Ожидается, что значения атрибутов директивы будут отдельными выражениями JavaScript (за исключением v-for, v-on и v-slot, которые будут обсуждаться в соответствующих разделах позже). Задача директивы — реактивно применять обновления к DOM при изменении значения ее выражения. Возьмем v-if в качестве примера:

Здесь v-if директива будет удалять/вставлять p элемент на основе истинности значения выражения seen

Некоторые директивы могут принимать «аргумент», обозначаемый двоеточием после имени директивы. Например, v-bind директива используется для реактивного обновления атрибута HTML

Другой пример — v-on директива, которая прослушивает события DOM

Также можно использовать выражение JavaScript в аргументе директивы, заключив его в квадратные скобки

Здесь attributeName будет динамически оцениваться как выражение JavaScript, а его вычисленное значение будет использоваться в качестве окончательного значения аргумента. Например, если у вашего экземпляра компонента есть свойство данных, attributeName значение которого равно "href", то эта привязка будет эквивалентна v-bind:href

Аналогичным образом вы можете использовать динамические аргументы для привязки обработчика к имени динамического события

В этом примере, когда eventNameзначение равно "focus", v-on:[eventName] будет эквивалентно v-on:focus

Модификаторы — это специальные постфиксы, обозначаемые точкой, которые указывают, что директива должна быть связана каким-то особым образом. Например, .prevent модификатор указывает v-on директиве вызывать event.preventDefault() вызванное событие

Резюмируя главу, давайте рассмотрим основные варианты использования синтаксиса шаблонов

В этом примере title и description являются свойствами объекта данных компонента Vue. Значения этих свойств будут автоматически отображаться в соответствующих элементах

В этом примере элементы p будут отображаться в зависимости от значения свойства showMessage. Если showMessage равно true, будет отображено первое сообщение, иначе - второе

В этом примере каждый элемент массива items будет отображаться в виде элемента списка li. Каждый элемент должен иметь уникальный идентификатор id, который используется в качестве ключа (:key) для оптимизации рендеринга

В этом примере при клике на кнопку будет вызываться метод incrementCounter, определенный в компоненте Vue. Метод может изменять значения свойств и выполнять другие действия

В этом примере значение свойства url будет привязано к атрибуту href элемента a. При изменении значения url ссылка будет обновляться автоматически

В этом примере fullName и age являются вычисляемыми свойствами, определенными в компоненте Vue. Они могут зависеть от других свойств и выполнять вычисления для получения значения

В этом примере capitalize - это фильтр, который применяется к значению свойства message и преобразует его, например, в верхний регистр или с заглавной буквы

В этом примере содержимое свойства htmlContent будет отображаться как сырой HTML-код. Будьте осторожны при использовании этой директивы, чтобы избежать уязвимостей безопасности

В этом примере классы и стили элемента div будут зависеть от значений свойств isActive, isBold, textColor и textSize. Если свойства имеют значение true или непустую строку, соответствующие классы и стили будут применены

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