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