Vue template syntax, vue Template

Vue template syntax, vue Template

Vue. js uses HTML-based template syntax, allowing developers to explicitly bind DOM to the data of the underlying Vue instance. All Vue. js templates are legal HTML, so they can be parsed by compliant browsers and HTML Parser.

At the underlying implementation level, Vue compiles the Template into a virtual DOM rendering function. In combination with the response system, when the application status changes, Vue can intelligently calculate the minimum cost of re-rendering components and apply them to DOM operations.

1. Insert the plain text "Mustache" Syntax

1 <! DOCTYPE html> 2 
Mustache cannot be used in HTML attributes. Use the v-bind command.
<Div v-bind: id = "dynamicId"> </div>
This attribute also applies to boolean values. If the condition is false, this attribute is removed.
<Button v-bind: disabled = "someDynamicCondition"> Button </button>
2. Use the v-html command to insert html. Data Binding will be ignored.
1 <! DOCTYPE html> 2 
3. for all data bindings, Vue. js provides full support for JavaScript expressions. Each binding can only be a single expression.
1 <! DOCTYPE html> 2 
Print result:

 
4. Some commands can be followed by a parameter, which is indicated by a colon.
<A v-bind: href = "url"> </a> // update html attributes.
<A v-on: click = "doSomething"> // listens for events.
5. Filter

The filter can only be bound to andv-bindExpression (supported from 2.1.0), because the filter is designed for text conversion. The filter function always accepts the value of the expression as the first parameter.
1 <! DOCTYPE html> 2 
Print result:

 
6. Command abbreviations
<Div> <! -- Complete Syntax --> <a v-bind: href = "url"> </a> <! -- Abbreviation --> <a: href = "url"> </a> <! -- Complete Syntax --> <a v-on: click = "doSomething"> </a> <! -- Abbreviation --> <a @ click = "doSomething"> </a> </div>