You’re browsing the documentation for v2.x and earlier. For v3.x, click here.

Slot Content

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.

If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also directly write render functions instead of templates, with optional JSX support.

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.

DOM Template Parsing Caveats

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 other bindings 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 v-html directive:. Using mustaches: {{ rawHtml }}. Using v-html directive: .

The contents of the span 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.

Shorthands

Mustaches cannot be used inside HTML attributes. Instead, use a v-bind directive:. In the case of boolean attributes, where their mere existence implies true, v-bind works a little differently.

If isButtonDisabled has the value of null, undefined, or false, the disabled attribute will not even be included in the rendered element. 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:. These expressions will be evaluated as JavaScript in the data scope of the owner Vue instance.

One restriction is that each binding can only contain one single expression, so the following will NOT work:. Template expressions are sandboxed and only have access to a whitelist of globals such as Math and Date. You should not attempt to access user-defined globals in template expressions.

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:. Here, the v-if directive would remove/insert the

element based on the truthiness of the value of the expression seen. 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:. 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:. Here the argument is the event name to listen to. We will talk about event handling in more detail too. Starting in version 2.6.0, it is also possible to use a JavaScript expression in a directive argument by wrapping it with square brackets:.

Deprecated Syntax

Here attributeName will be dynamically evaluated as a JavaScript expression, and its evaluated value will be used as the final value for the argument.

For example, if your Vue instance has a data property, attributeName, whose value is "href", then this binding will be equivalent to v-bind:href.

Similarly, you can use dynamic arguments to bind a handler to a dynamic event name:. In this example, when eventName‘s value is "focus", v-on:[eventName] will be equivalent to v-on:focus.

Dynamic arguments are expected to evaluate to a string, with the exception of null. The special value null can be used to explicitly remove the binding. Any other non-string value will trigger a warning. Dynamic argument expressions have some syntax constraints because certain characters, such as spaces and quotes, are invalid inside HTML attribute names.

For example, the following is invalid:. The workaround is to either use expressions without spaces or quotes, or replace the complex expression with a computed property.

When using in-DOM templates (i.e., templates written directly in an HTML file), you should also avoid naming keys with uppercase characters, as browsers will coerce attribute names into lowercase:.

Fallback Content

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:.

You’ll see other examples of modifiers later, for v-on and for v-model, when we explore those features. 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.

Named Slots Shorthand

Therefore, Vue provides special shorthands for two of the most often used directives, v-bind and v-on:. They may look a bit different from normal HTML, but : and @ are valid characters for attribute names and all Vue-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.

← The Vue InstanceComputed Properties and Watchers →.

Caught a mistake or want to contribute to the documentation?Edit this on GitHub!Deployed onNetlify . You’re browsing the documentation for v2.x and earlier. For v3.x, click here.

Here’s an example of a Vue component:. Components are reusable Vue instances with a name: in this case, .

We can use this component as a custom element inside a root Vue instance created with new Vue:. The above is made possible by Vue’s element with the is special attribute:. In the example above, currentTabComponent can contain either:. the name of a registered component, or.

a component’s options object. See this example to experiment with the full code, or this version for an example binding to a component’s options object, instead of its registered name. Keep in mind that this attribute can be used with regular HTML elements, however they will be treated as components, which means all attributes will be bound as DOM attributes.

Scoped Slots

For some properties such as value to work as you would expect, you will need to bind them using the .prop modifier. That’s all you need to know about dynamic components for now, but once you’ve finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on Dynamic & Async Components.

1. Some HTML elements, such as

   ,
   , and have restrictions on what elements can appear inside them, and some elements such as
   1. ,
   , and can only appear inside certain other elements. This will lead to issues when using components with elements that have such restrictions.

   2. The custom component will be hoisted out as invalid content, causing errors in the eventual rendered output. Fortunately, the is special attribute offers a workaround:.

   It should be noted that this limitation does not apply if you are using string templates from one of the following sources:. String templates (e.g. That’s all you need to know about DOM template parsing caveats for now – and actually, the end of Vue’s Essentials.

   Named Slots

   Congratulations! There’s still more to learn, but first, we recommend taking a break to play with Vue yourself and build something fun. Once you feel comfortable with the knowledge you’ve just digested, we recommend coming back to read the full guide on Dynamic & Async Components, as well as the other pages in the Components In-Depth section of the sidebar.

   ← Form Input BindingsComponent Registration →. Caught a mistake or want to contribute to the documentation?Edit this on GitHub!Deployed onNetlify .

   You’re browsing the documentation for v2.x and earlier.
   For v3.x, click here. This page assumes you’ve already read the Components Basics.