Компонент: шаблон

Шаблон Vue.js представляет собой корректную HTML-разметку, в которой допускается использование свойств экземпляра Vue. Эти свойства задаются в блоке script. Vue преобразует шаблоны в render-функции виртуального DOM.

Рассмотрим ключевые особенности шаблонов:

1. Интерполяции: выражения JavaScript, текст, сырой HTML и атрибуты.
2. Директивы: модификаторы, аргументы и динамические аргументы.
3. Сокращения: v-bind и v-on.

Интерполяция: текст

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

Текстовая интерполяция во Vue реализована через синтаксис Mustache — двойные фигурные скобки. Этот приём используется повсеместно и выглядит следующим образом:

<span class="username">{{ username }}</span>

Содержимое фигурных скобок будет заменено значением свойства username. При этом DOM автоматически обновится при каждом изменении username. Чтобы зафиксировать значение и исключить его из реактивного обновления, можно воспользоваться директивой v-once.

<span v-once class="username">{{ username }}</span>

Интерполяция: сырой HTML

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

// htmlString = `<span style="color:red;">Красный текст</span>`

// Вместо htmlString код выведется так, как мы его написали выше в переменной
<p>{{ htmlString }}</p>

// В этом случае выведется «Красный текст» красного цвета
<p><span v-html="htmlString"></span></p>

Важно: будьте осторожны при работе с сырым HTML. Проверяйте, кто будет создавать контент, который вы связываете с HTML — риски появления вредоносного кода зависят от людей, у которых есть доступ к изменению контента.

На практике вставка сырого HTML применяется значительно реже, чем текстовая интерполяция и привязка атрибутов.

Интерполяция: атрибуты

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

<button v-bind:style="btnStyle">Кнопка</button>
<button v-bind:disabled="isDisabled">Кнопка</button>

Если значение isDisabled равно null, undefined или false, атрибут disabled не будет добавлен к элементу <button>. В примере мы выбрали style и disabled для наглядности, однако динамическим можно сделать абсолютно любой атрибут HTML-тега в шаблоне.

Интерполяция: выражения JS

{{ num + 1 }}
{{ isLoading ? 'Loading...' : 'Is loaded' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'item-' + id"></div>

Выражения выполняются как JavaScript-код в области видимости соответствующего экземпляра Vue. Ограничение: допускается только одно выражение, поэтому следующий код работать не будет:

<!-- это не вычисляемое выражение, а определение переменной: -->
{{ var a = 1 }}

<!-- операторы условий не сработают, используйте условные операторы в тернарной форме: -->
{{ if (ok) { return message } }}

Помимо этого, выражения в шаблонах исполняются в режиме «песочницы», поэтому доступны только определённые глобальные объекты, такие как Math и Date. Обращение к пользовательским глобальным объектам внутри шаблонных выражений недопустимо.

Директивы

Директивы — специальные атрибуты с префиксом v-. В качестве значения они принимают одно выражение JS (исключение — v-for).

v-bind (сокращается как ': '). Позволяет создавать динамические атрибуты. Связывает значение свойства с HTML-атрибутом в шаблоне — class, style, id, href и так далее. Примеры: v-bind:href="itemUrl", v-bind:id="itemId". Привязка осуществляется реактивно — при изменении свойства значение атрибута обновится автоматически.

v-on (сокращается как '@'). Позволяет назначать обработчик на событие. Поддерживаются все стандартные DOM-события. Название события указывается через двоеточие, например v-on:click="getData". После имени события через точку можно добавить модификатор, а также выстроить цепочку из нескольких модификаторов: v-on:click.stop.prevent="submitForm".

v-model. Обеспечивает двустороннюю привязку HTML-элемента к свойству, что особенно удобно при работе с полями форм. Ввод в input приведёт к обновлению привязанного свойства, и наоборот — изменение свойства обновит значение input. Под капотом v-model объединяет в себе v-bind и v-on. В некоторых случаях удобнее использовать их по отдельности, а не через v-model.

v-show. Определяет условие, при котором элемент должен быть видим или скрыт. Элемент с v-show всегда остаётся в DOM, изменяется лишь CSS-свойство display. Директива v-show не работает с элементом <template> и не поддерживает v-else.

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

v-else. Дополняет v-if и работает аналогично конструкции if/else в JavaScript. Добавляется к тегу, непосредственно следующему за тегом с v-if, без параметров.

v-else-if. Применяется реже, чем v-if и v-else. Логика аналогична конструкции else if в JS.

v-for. Предназначен для отрисовки списков элементов. Работает как с массивами, так и с объектами. Подробнее рассмотрим в следующем разделе.

v-once. Отрисовывает элемент один раз и далее игнорирует любые обновления данных.

v-html. Отображает переданную строку как HTML-разметку (рассмотрено выше).

Атрибуты

Ряд директив принимает «аргумент», который отделяется от названия директивы двоеточием. Например:

<a v-bind:href="url"> ... </a>

Здесь href — это аргумент, который указывает директиве v-bind связать атрибут href элемента со значением выражения url.

Динамические атрибуты

<a v-bind:[attributeName]="attributeValue"> ... </a>
<a v-on:[eventName]="eventHandler"> ... </a>

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

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

Модификаторы

Модификаторы — постфиксы, добавляемые через точку. Они позволяют уточнить поведение директивы. Пример: v-on:submit.prevent. Модификатор .prevent указывает директиве v-on вызвать event.preventDefault() при обработке события.

Сокращения

Директивы v-bind и v-on имеют сокращённую форму записи. Так, v-bind:id можно записать как :id — префикс v-bind отбрасывается, остаётся лишь двоеточие и имя атрибута.

Аналогично, v-on:click записывается как @click — вместо v-on: используется символ @.

В проектах мы придерживаемся сокращённого синтаксиса.