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

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

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

Вставки

Текст

Используя синтаксис «Усы» (двойные фигурные скобки), мы можем добиться интерполяции текста, который является самой основной формой привязки данных. Пример как показано ниже:

HTML

<div> Product: {{product}} </div>

Приведенный выше тег усов заменяется значением свойства продукта соответствующего объекта данных. Это значение будет обновляться при каждом изменении свойства продукта объекта данных.

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

HTML

<div v-once> this will never change: {{product}} </div>

Сырой HTML

Синтаксис двойных усов, показанный выше, никогда не интерпретирует данные как HTML, а как простой текст. Когда мы хотим вывести настоящий HTML, нам нужно использовать директиву v-html:

HTML

<p>Using mustaches: {{product}} </p>
<p>Using v-html directive: <span v-html="product"></span></p>

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

Атрибуты

Вместо использования усов в атрибутах HTML мы используем директиву v-bind:

HTML

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

В случае логических атрибутов, где их простое существование подразумевает истину, v-bind работает немного по-другому. В этом примере:

HTML

<button v-bind:disabled="disabled">Button</button>

Если отключено, имеет значение null, undefined или false, атрибут disabled даже не будет включен в отображаемый элемент <button>.

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

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

HTML

{{ value + 1 }}
{{satisfied ? 'YES' : 'NO' }}
{{sentence.split('').reverse().join('')}}
<ul v-bind:id="'product-'+id"></ul>

Вышеуказанные выражения будут оцениваться как JavaScript в области данных экземпляра Vue владельца.

Директивы

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

HTML

<div v-if="seen">I am Visible</div>

В приведенном выше примере директива v-if удаляет / вставляет элемент <div> на основе достоверности значения увиденного выражения.

аргументы

в Vue некоторые директивы могут принимать аргументы, и это обозначается двоеточием после имени директивы. Пример показан с директивой v-bind:

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