Unetway

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

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

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

Текст

Самый простой способ связывания данных - текстовая интерполяция с синтаксисом 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 не основывается на строках. Для этого лучше использовать компоненты.

Атрибуты

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

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

При использовании булевых атрибутов, 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 } }}

Директивы

Директивы - специальные атрибуты с префиксом 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>

Аргументом является название типа события.

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

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

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

В 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-кода, но символы : и @ валидные для названий атрибутов и будут корректно работать в браузерах.В итоговой разметке они не появляются.