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

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

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

Если уже знакомы с концепцией виртуального DOM и предпочитаете использовать ничем не ограниченную мощь JavaScript — вместо шаблонов можно непосредственно писать render-функции, и даже с использованием JSX.

# Интерполяции

# Текст

Наиболее простой способ связывания данных — текстовая интерполяция с использованием «Mustache»-синтаксиса (двойных фигурных скобок):

<span>Сообщение: {{ msg }}</span>

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

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

<span v-once>Это сообщение никогда не изменится: {{ msg }}</span>

# Сырой HTML

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

<p>Двойные фигурные скобки: {{ rawHtml }}</p>
<p>Директива v-html: <span v-html="rawHtml"></span></p>

1
2

See the Pen Rendering v-html by Vue (@Vue) on CodePen.

Содержимое тега span заменится значением свойства rawHtml, интерпретированного как обычный HTML — все привязки данных в котором игнорируются. Запомните, использование v-html для составления из частей итогового шаблона не сработает, потому что движок шаблонов Vue не основан на строках. Вместо этого следует использовать компоненты, как фундаментальную единицу для сочетания и переиспользования элементов UI.

Совет

Динамическая отрисовка произвольного HTML-кода на сайте крайне опасна, так как может легко привести к XSS-уязвимостям (opens new window). Используйте интерполяцию HTML только для доверенного содержимого, и никогда не передавайте туда содержимое, которое может указывать пользователь.

# Атрибуты

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

<div v-bind:id="dynamicId"></div>

Если привязываемым значением будет null или undefined, то атрибут не будет добавлен на элемент при его отрисовке.

В случае с булевыми атрибутами, где само их наличие уже подразумевает значение true, v-bind работает немного по-другому. Например:

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

Атрибут disabled будет добавляться когда значение isButtonDisabled истинно. Он также будет добавляться если значением будет пустая строка, для сохранения консистентности с <button disabled="">. При использовании других ложных значений атрибут будет опущен.

# Использование выражений JavaScript

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

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

1
2
3
4
5
6
7

Выражения будут выполняться как код JavaScript в области видимости текущего активного экземпляра. Единственное ограничение в том, что привязка может содержать лишь одно выражение, поэтому приведённый ниже код НЕ СРАБОТАЕТ:

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

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

1
2
3
4
5
6

# Директивы

Директивы — специальные атрибуты с префиксом v-. В значении директивы ожидается одно выражение JavaScript (за исключением v-for и v-on, о которых поговорим далее). Работа директивы заключается в реактивном применении изменений к DOM, когда будет изменяться значение выражения. Вернёмся к примеру из введения:

<p v-if="seen">Сейчас меня видно</p>

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

# Аргументы

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

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

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

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

<a v-on:click="doSomething"> ... </a>

В данном случае аргументом определяется тип прослушиваемого события. Подробнее обработку событий разберём позднее.

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

Можно использовать выражение JavaScript в аргументе директивы, для этого потребуется обернуть его в квадратные скобки:

<!--
Обратите внимание, есть ограничения для выражений аргументов, подробнее
об этом ниже, в разделе «Ограничения значений динамического аргумента».
-->
<a v-bind:[attributeName]="url"> ... </a>

1
2
3
4
5

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

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

<a v-on:[eventName]="doSomething"> ... </a>

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

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

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

<form v-on:submit.prevent="onSubmit">...</form>

Другие примеры применения модификаторов увидим далее, когда будем изучать подробнее возможности v-on и v-model.

# Сокращённая запись

Префикс v- нужен для визуального обозначения Vue-специфичных атрибутов в шаблонах. Это особенно удобно, когда Vue используется для добавления динамического поведения в существующей разметке, но для часто используемых директив может быть многословным. С другой стороны, потребность в v- ещё меньше при создании одностраничных приложений (opens new window), где Vue управляет каждым шаблоном. Поэтому для двух наиболее часто используемых директив v-bind и v-on есть сокращённая запись:

# Сокращение `v-bind`

<!-- полный синтаксис -->
<a v-bind:href="url"> ... </a>

<!-- сокращённая запись -->
<a :href="url"> ... </a>

<!-- сокращённая запись с динамическим именем аргумента -->
<a :[key]="url"> ... </a>

1
2
3
4
5
6
7
8

# Сокращение `v-on`

<!-- полный синтаксис -->
<a v-on:click="doSomething"> ... </a>

<!-- сокращённая запись -->
<a @click="doSomething"> ... </a>

<!-- сокращённая запись с динамическим именем события -->
<a @[event]="doSomething"> ... </a>

1
2
3
4
5
6
7
8

Подобная запись на вид несколько отличается от обычного HTML-кода, но символы : и @ являются допустимыми символами в именах атрибутов и браузеры, которые поддерживает Vue, могут их корректно обработать. Кроме того, в итоговой разметке их уже не будет. Сокращённый синтаксис полностью опционален, но узнав больше о его использовании вероятно оцените его удобство.

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

# Ограничения

# Ограничения значений динамического аргумента

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

# Ограничения динамического выражения

Для выражения динамического аргумента есть синтаксические ограничения, потому что некоторые символы, такие как пробелы и кавычки, являются недопустимыми для имён атрибутов HTML. Например:

<!-- НЕПРАВИЛЬНО, это выбросит предупреждение компилятора. -->
<a v-bind:['foo' + bar]="value"> ... </a>

1
2

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

При использовании шаблонов в DOM (шаблонов, написанных непосредственно в HTML-файле), следует также избегать имён ключей с прописными символами, потому что браузеры будут принудительно приводить имена атрибутов к нижнему регистру:

<!--
В шаблонах DOM это преобразуется в v-bind:[someattr].
Если в экземпляре не окажется свойства "someattr", то этот код НЕ СРАБОТАЕТ.
-->
<a v-bind:[someAttr]="value"> ... </a>