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

Для связывания DOM с данными экземпляра Vue использует синтаксис, основанный на HTML. Все шаблоны Vue являются валидным 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>

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

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

Атрибуты

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

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

При использовании с булевыми атрибутами (когда их наличие уже означает true) v-bind работает немного иначе. В этом примере:

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

Если значением isButtonDisabled будет null, undefined или false, то атрибут disabled не добавится в элемент <button>.

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

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

{{ number + 1 }}

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

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

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

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

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

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

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

Директивы

Директивы — это специальные атрибуты с префиксом v-. В качестве значения они принимают одно выражение JavaScript (за исключением v-for, которую мы изучим далее). Директива реактивно применяет к 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>

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

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

Добавлено в версии 2.6.0+

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

<a v-bind:[attributeName]="url"> ... </a>

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

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

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

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

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

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

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

Динамические выражения аргументов имеют синтаксические ограничения, потому что некоторые символы недопустимы в именах атрибутов HTML, такие как пробелы и кавычки. Также стоит избегать верхнего регистра если указываете шаблоны в DOM.

Например, следующее недопустимо:

<!-- Подобное вызовет предупреждение компилятора. -->
<a v-bind:['foo' + bar]="value"> ... </a>

Обойти это ограничение можно использованием выражения без пробелов или кавычек, или заменой комплексного выражения на вычисляемое свойство.

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

<!-- Будет преобразовано в v-bind:[someattr] при указании в шаблоне в DOM. -->
<a v-bind:[someAttr]="value"> ... </a>

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

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

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

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

Сокращения

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

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

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

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

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

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

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

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

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

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