Vue.js Template Syntax: Interpolations, Directives, and Data Binding

Vue.js uses an HTML-based template syntax, this allows us to declaratively bind the rendered DOM to the underlying Vue instance's data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.

Under the hood, Vue compiles the templates into Virtual DOM render functions. When Vue is combined with the reactivity system, it is able to intelligently figure out the minimal number of components to re-render and apply the minimum amount of Dom manipulations once there is a state change in the app.

Interpolations

Text

Using the "Mustache" syntax (double curly braces) we can achieve text interpolation which is the most basic form of data binding. An example is as shown below:

HTML

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

The mustache tag above is replaced with the value of the product property on the corresponding data object. This value will be updated whenever the data object's product property changes.

Using the v-once directive we can perform one-time interpolations that do not update when data changes. Note however this will also affect any other bindings on the same node:

HTML

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

Raw HTML

The double mustache syntax shown above never interprets the data as HTML but as plain text. When we want to output the real HTML, we will need to use the v-html directive:

HTML

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

The contents of the span will be replaced with the value of the product property, interpreted as plain HTML - data bindings are ignored. You cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Rather, components are preferred as the fundamental unit for UI reuse and composition.

Attributes

Instead of using mustaches in HTML attributes we use v-bind directive:

HTML

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

In the case of boolean attributes, where their mere existence implies true, v-bind works a little differently. In this example:

HTML

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

If disabled has the value of null, undefined, or false, the disabled attribute will not even be included in the rendered <button> element.

Using JavaScript Expressions

Thus far we have been binding to simple property keys in our templates only. But vue.js actually supports the full power of JavaScript expressions inside all data bindings:

HTML

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

The expressions above will be evaluated as JavaScript in the data scope of the owner Vue instance.

Directives

Directives are special attributes with the v- prefix. Directive attribute values are usually expected to be a single JavaScript expression (with the exception of v-for). A directive's job is to reactively apply side effects to the DOM when the value of its expression changes:

HTML

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

In the example above the v-if directive would remove/insert the <div> element based on the truthfulness of the value of the seen expression.

Arguments

in Vue some directives can take an arguments and this is denoted by a colon after the directive name. An example is shown with the v-bind directive:

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

Previous: Vue.js Instance: Data, Methods, and Lifecycle Hooks.
Next: Vue.js Computed Properties and Watchers: Managing Complex Logic