- The Vue Instance
- Template Syntax
- Computed Properties and Watchers
- Class and Style Bindings
- Conditional Rendering
- List Rendering
- Event Handling
- Form Input Bindings
- Reactivity in Depth
- Transition Effects
- Transitioning State
- Render Functions
- Custom Directives
- Single File Components
- Production Deployment Tips
- State Management
- Unit Testing
- Server-Side Rendering
- TypeScript Support
- Migration from Vue 1.x
- Migration from Vue Router 0.7.x
- Migration from Vuex 0.6.x to 1.0
- Comparison with Other Frameworks
- Join the Vue.js Community!
- Meet the Team
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 amount of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.
The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces):
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.
You can also perform one-time interpolations that do not update on data change by using the v-once directive, but keep in mind this will also affect any binding on the same node:
The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the
The contents of this
div will be replaced with the value of the
rawHtml property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use
v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.
Mustaches cannot be used inside HTML attributes, instead use a v-bind directive:
It also works for boolean attributes - the attribute will be removed if the condition evaluates to a falsy value:
Template expressions are sandboxed and only have access to a whitelist of globals such as
Date. You should not attempt to access user defined globals in template expressions.
Directives are special attributes with the
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:
v-if directive would remove/insert the
<p> element based on the truthiness of the value of the expression
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:
href is the argument, which tells the
v-bind directive to bind the element’s
href attribute to the value of the expression
Another example is the
v-on directive, which listens to DOM events:
Here the argument is the event name to listen to. We will talk about event handling in more detail too.
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:
We will see more use of modifiers later when we take a more thorough look at
Vue.js allows you to define filters that can be used to apply common text formatting. Filters are usable in two places: mustache interpolations and
Vue 2.x filters can only be used inside mustache interpolations and
v-bind expressions (the latter supported in 2.1.0+), because filters are primarily designed for text transformation purposes. For more complex data transforms in other directives, you should use Computed properties instead.
The filter function always receives the expression’s value (the result of the former chain) as its first argument. In this example, the
capitalize filter function will receive the value of
message as its argument.
Filters can be chained:
In this case,
filterA, defined with a single argument, will recieve the value of
message, and then the
filterB function will be called with the result of
filterA passed into
filterB‘s single argument.
filterA is defined as a function taking three arguments. The value of message will be passed into the first argument. The plain string
'arg1' will be passed into the
filterA as its second argument, and the value of expression
arg2 will be evaluated and passed in as the third argument.
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 an SPA where Vue.js manages every template. Therefore, Vue.js provides special shorthands for two of the most often used directives,
They may look a bit different from normal HTML, but
@ are valid chars for attribute names and all Vue.js supported browsers can parse it correctly. In addition, they do not appear in the final rendered markup. The shorthand syntax is totally optional, but you will likely appreciate it when you learn more about its usage later.