Template syntax
Vue.js uses an HTML-based template syntax that allows you 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. Combined with the reactivity system, Vue is able to intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.
Interpolations
Text
The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces):
<span>Message: {{ msg }}</span>
The mustache tag will be replaced with the value of the msg property on the corresponding data object. It will also be updated whenever the data object’s msg property changes.
Attributes
Mustaches cannot be used inside HTML attributes. Instead, use a v-bind
directive:
<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:
<button v-bind:disabled="isButtonDisabled">Button</button>
If isButtonDisabled has the value of null, undefined, or false, the disabled attribute will not even be included in the rendered <button>
element.
Using JavaScript Expressions
So far we’ve only been binding to simple property keys in our templates. But Vue.js actually supports the full power of JavaScript expressions inside all data bindings:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
Directives
Directives are special attributes with the v- prefix. Directive attribute values are expected to be a single JavaScript expression (with the exception of v-for, which will be discussed later). A directive’s job is to reactively apply side effects to the DOM when the value of its expression changes. Let’s review the example we saw in the introduction:
<p v-if="seen">Now you see me</p>
Here, the v-if
directive would remove/insert the <p>
element based on the truthiness of the value of the expression seen.
Arguments
Some directives can take an “argument”, denoted by a colon after the directive name. For example, the v-bind
directive is used to reactively update an HTML attribute:
<a v-bind:href="url"> ... </a>
Here href is the argument, which tells the v-bind directive to bind the element’s href attribute to the value of the expression url.
Another example is the v-on
directive, which listens to DOM events:
<a v-on:click="doSomething"> ... </a>
Here the argument is the event name to listen to. We will talk about event handling in more detail too.
Shorthands
The v- prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the v- prefix becomes less important when you are building a SPA, where Vue manages every template.
Therefore, Vue provides special shorthands for two of the most often used directives, v-bind and v-on:
<!-- full syntax -->
<a v-bind:href="url"> ... </a>
<!-- shorthand -->
<a :href="url"> ... </a>
Modifiers
Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the .prevent
modifier tells the v-on
directive to call event.preventDefault()
on the triggered event:
<form v-on:submit.prevent="onSubmit"> ... </form>