Vue Template Syntax

Vue uses an HTML-based template syntax that allows developers to declaratively bind DOM to the underlying data of component instances. All Vue templates are syntactically valid HTML and can be parsed by compliant browsers and HTML parsers.

Under the hood, Vue compiles templates into highly optimized JavaScript code. Combined with the reactivity system, when application state changes, Vue can intelligently deduce the minimum number of components that need re-rendering and apply the minimum number of DOM operations.

Interpolation

Text

The most common form of data binding is text interpolation using "Mustache" syntax (double curly braces):

<span>Message: {{ msg }}</span>

The double curly brace tags are replaced with the value of the msg property in the corresponding component instance. Also, whenever the msg property changes, the content at the interpolation updates automatically.

Raw HTML

Double curly braces interpret data as plain text, not HTML code. To insert HTML, you need to use the v-html directive:

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

The content of <span v-html="rawHtml"></span> will be replaced with the value of the rawHtml property and parsed as HTML. Note that you cannot use v-html to compose partial templates, because Vue is not a string-based template engine.

Security Warning: Dynamically rendering arbitrary HTML on a website is very dangerous because it can easily lead to XSS attacks. Please only use HTML interpolation for trusted content, and never use user-submitted content as interpolation.

Attribute Binding

Mustache syntax cannot be used in HTML attributes. To reactively bind an attribute, you should use the v-bind directive:

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

The v-bind directive instructs Vue to keep the element's id attribute consistent with the component's dynamicId property. If the bound value is null or undefined, the attribute will be removed from the rendered element.

Since v-bind is very commonly used, we provide a dedicated shorthand syntax for it:

<div :id="dynamicId"></div>

Using JavaScript Expressions

Vue supports full JavaScript expressions in all data bindings:

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="'list-' + id"></div>

These expressions are parsed as JavaScript within the data scope of the current component instance. The only limitation is that each binding can only contain a single expression, so the following examples will not work:

<!-- This is a statement, not an expression -->
{{ var a = 1 }}

<!-- Flow control also won't work, use ternary expressions instead -->
{{ if (ok) { return message } }}