Vue.js

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

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

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

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

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

# Текст

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

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

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

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

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

# Сырой 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>
1

Атрибут не добавится на элемент, если значением будет null или undefined.

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

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

Атрибут 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
7
8

# Директивы

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

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

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

# Аргументы

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

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

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

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

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

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

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

Можно использовать выражение 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>
1

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

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

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

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

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

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

Префикс v- нужен для визуального обозначения в шаблонах Vue-специфичных атрибутов. Это особенно удобно, когда Vue используется для добавления динамического поведения в существующей разметке, но для часто используемых директив может быть многословным. В то же время, потребность в v- ещё меньше при создании одностраничных приложений (SPA) (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>
1
2
3
4
5

# JavaScript выражения

Выражения в шаблонах ограничены песочницей и имеют доступ только к ограниченному списку глобальных свойств (opens new window), таких как Math и Date. Не следует пытаться получить доступ к пользовательским глобальным свойствам в выражениях шаблонов.

← Свойства data и методы →