Vue js вывод html

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

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

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

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

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

# Текст

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

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

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

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

# Сырой HTML

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

p>Двойные фигурные скобки: >p> p>Директива v-html: span v-html="rawHtml">span>p> 

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

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

(opens new window) . Используйте интерполяцию HTML только для доверенного содержимого, и никогда не передавайте туда содержимое, которое может указывать пользователь.

# Атрибуты

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

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

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

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

Атрибут disabled будет добавляться когда значение isButtonDisabled истинно. Он также будет добавляться если значением будет пустая строка, для сохранения консистентности с . При использовании других ложных значений атрибут будет опущен.

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

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

Выражения будут выполняться как код JavaScript в области видимости текущего активного экземпляра. Единственное ограничение в том, что привязка может содержать лишь одно выражение, поэтому приведённый ниже код НЕ СРАБОТАЕТ:

# Директивы

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

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

В этом случае директива v-if будет удалять или вставлять элемент

в зависимости от истинности значения выражения seen .

# Аргументы

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

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

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

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

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

Можно использовать выражение JavaScript в аргументе директивы, для этого потребуется обернуть его в квадратные скобки:

 a v-bind:[attributeName]="url"> . a> 

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

Аналогичным образом можно использовать динамические аргументы для создания обработчика событий, в котором имя события будет определяться динамически:

a v-on:[eventName]="doSomething"> . a> 

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

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

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

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

Другие примеры применения модификаторов увидим далее, когда будем изучать подробнее возможности 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 :Vue js вывод html="url"> . a> 

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

 a v-on:click="doSomething"> . a> a @click="doSomething"> . a> a @[event]="doSomething"> . a> 

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

Со следующих страниц руководства в примерах будут использоваться сокращённые варианты, потому что такая запись наиболее распространена у разработчиков Vue.

# Ограничения

# Ограничения значений динамического аргумента

Ожидается, что динамический аргумент после вычисления будет строкой, за исключением null . Специальное значение null можно использовать для явного удаления привязки. Использование любых других нестроковых значений будет выбрасывать предупреждения.

# Ограничения динамического выражения

Для выражения динамического аргумента есть синтаксические ограничения, потому что некоторые символы, такие как пробелы и кавычки, не допускаются в именах атрибутов HTML. Например:

Рекомендуем выносить любые составные выражения в вычисляемые свойства, одну из важных фундаментальных частей Vue, с которой уже совсем скоро познакомимся.

При использовании шаблонов в DOM (шаблонов, написанных непосредственно в HTML-файле), также следует избегать прописных символов в именах ключей, потому что браузеры будут принудительно приводить имена атрибутов к нижнему регистру:

# JavaScript выражения

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

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

(opens new window)
Последнее обновление страницы: 1 минуту назад

Источник