Vue Js Documentation Template

Posted on  by admin

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.

In this example:.

If isButtonDisabled has the value of null, undefined, or false, the disabled attribute will not even be included in the rendered