Vue variable with 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 variable with 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 минуту назад

Источник

How to Use Vue Variables in HTML Tags: A Comprehensive Guide for Dynamic Content

Learn how to pass Vue variables to HTML tags using v-bind, v-html, computed properties, and v-for directives for dynamic and responsive user interfaces.

VueJS is a popular JavaScript framework used for building dynamic user interfaces and single-page applications. One of the most important features of VueJS is its ability to pass variables to HTML tags to display dynamic content on the page. In this guide, we’ll explore the different ways to use Vue variables in HTML tags and how to implement them in your projects.

Understanding VueJS Mustaches > and HTML Tags

VueJS mustaches > are used for templating and data binding in Vue components. However, they cannot be used in HTML tags directly. To bind Vue variables to HTML tags, we need to use the v-bind directive.

Using v-bind to Pass Vue Variables to HTML Tags

The v-bind directive allows us to bind Vue variables to HTML attributes. We can use v-bind to pass dynamic data to HTML tags, such as the src attribute of an image tag or the href attribute of a link tag. We can also use v-bind to pass data to custom components.

For example, let’s say we have a Vue component that renders an image. We can pass a dynamic image source URL to this component using the v-bind directive. Here’s how it works:

In this example, we’re using v-bind:src to bind the imageSrc variable to the src attribute of the image tag. Whenever the value of imageSrc changes, the image source URL will update accordingly.

Displaying Dynamic HTML with Vue Variables Using v-html Directive

Sometimes, we need to display dynamic HTML content on the page based on Vue variables. We can use the v-html directive to bind HTML content to an element’s innerHTML property. However, we need to be careful when using v-html, as it can introduce security vulnerabilities if not used properly.

Here’s an example of using v-html to display dynamic HTML content:

In this example, we’re using v-html to bind the dynamicHTML variable to the innerHTML property of the div tag. The content of dynamicHTML will be rendered as HTML on the page.

Composing HTML Based on Vue Variables Using Computed Properties

Computed properties are functions that return computed values based on Vue variables. We can use computed properties to compose HTML based on Vue variables. Computed properties are cached based on their dependencies, which makes them efficient for complex computations.

Here’s an example of using computed properties to compose HTML:

In this example, we’re using a computed property called reversedMessage to compute the reverse of the message variable. We’re then using mustaches > to bind the values of message and reversedMessage to HTML tags.

Looping and Accessing Vue Variables with v-for Directive

The v-for directive allows us to loop through arrays and objects in Vue components. We can access each item in the looped element using the v-for directive. We can also use the v-for directive to iterate over a range of numbers.

Here’s an example of using v-for to loop through an array of items:

In this example, we’re using v-for to loop through the items array and render a list of items. We’re also using the :key directive to provide a unique key for each item in the list.

Other code examples

In Javascript , for instance, v-bind Shorthand code sample

In Html as proof, v-bind code example

 The above syntax means the presence of the active class will be determined by the truthiness of the data property isActive.

In Html , for example, vue set html in var code example

Conclusion

VueJS provides multiple ways to use Vue variables in HTML tags, including v-bind, v-html, computed properties, and v-for. By using these techniques, we can create dynamic and responsive user interfaces with VueJS. Remember to follow best practices and avoid common issues when developing with VueJS to ensure optimal performance and scalability.

Источник