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

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

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

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

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

Текст

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

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

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

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

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

Сырой HTML

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

<div v-html="rawHtml"></div>

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

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

Атрибуты

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

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

С булевыми атрибутами этот метод тоже работает. Если переданное свойство ложное, атрибут будет удалён полностью:

<button v-bind:disabled="isButtonDisabled">Кнопка</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">

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

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

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

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

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

Фильтры

Для распространённых задач форматирования текста во Vue используются фильтры. Они находят своё применение в двух местах: в mustache-интерполяциях и в выражениях v-bind. Фильтры добавляются в конце выражения JavaScript и отделяются вертикальной чертой:

<!-- mustache -->
{{ message | capitalize }}
<!-- v-bind -->
<div v-bind:id="rawId | formatId"></div>

Во Vue 2.x фильтры могут быть использованы только в mustache-выражениях и (начиная с 2.1.0+) в выражениях v-bind, поскольку фильтры в первую очередь предназначены для преобразования текста. Для более сложных преобразований в других директивах лучше использовать вычисляемые свойства.

Функция-фильтр получает первым аргументом вычисленное значение выражения.

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

Фильтры можно объединять в цепочки:

{{ message | filterA | filterB }}

Фильтры являются JavaScript-функциями, и потому могут принимать параметры:

{{ message | filterA('arg1', arg2) }}

В данном случае строка 'arg1' будет передана в фильтр на позиции второго аргумента, а значение выражения arg2 — на позиции третьего.

Сокращения

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

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

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

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

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

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