Template syntax


In the underlying implementation, Vue compiles the template into a virtual DOM rendering function. Combined with the responsive system, Vue can intelligently calculate how many components need to be re-rendered and minimize the number of DOM operations.

If you are familiar with virtual DOM and prefer the raw power of JavaScript, you can also write the render function directly without templates, using the optional JSX syntax.


Directory

  • ##Interpolation

    • Text

    • Original HTML

    • Features

    • Using JavaScript expressions

  • Commands

    • Parameters

    • Dynamic parameters

    • Modifier

  • Abbreviation

    • v- bind abbreviation

    • v-on abbreviation


##Interpolation


##Text

The most common form of data binding is text interpolation using "Mustache" syntax (double braces): 

<span>Message: {{ msg }}</span>

Mustache tags will be replaced by

msg## on the corresponding data object # The value of the attribute. Whenever the

msg

property on the bound data object changes, the content at the interpolation point is updated. By using the v-once directive, you can also perform one-time interpolation. When the data changes, the content at the interpolation will not be updated. But please note that this will affect other data bindings on the node: 

<span v-once>这个将不会改变: {{ msg }}</span>

##raw HTML

Double curly braces will interpret the data as normal text instead of HTML code. To output real HTML, you need to use the v-html directive: 

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

The content of this span will be replaced with the attribute value rawHtml, directly as HTML - data binding in the parsed attribute value will be ignored. Note that you cannot use v-html to compose partial templates because Vue is not a string-based template engine. In contrast, for user interfaces (UIs), components are better suited as basic units that are reusable and composable.

Arbitrary HTML rendered dynamically on your site can be very dangerous, as it can easily lead to XSS attacks. Please only use HTML interpolation for trusted content and never use interpolation for user-supplied content.


Features

Mustache syntax cannot be applied to HTML features. When encountering this Situations where the v-bind directive should be used: 

<div v-bind:id="dynamicId"></div>

For Boolean properties (their mere presence means that the value is true), v-bind Works slightly differently, in this example: 

<button v-bind:disabled="isButtonDisabled">Button</button>

If the value of isButtonDisabled is null, undefined or false , then the disabled attribute will not even be included in the rendered <button> element.


Using JavaScript expressions

So far in our templates we have only Bind simple property key values. But in fact, for all data binding, Vue.js provides full JavaScript expression support. 

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

These expressions will be parsed as JavaScript in the data scope of the Vue instance to which they belong. There is a limitation that each binding can only contain a single expression , so the following examples will not take effect. 

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

Template expressions are placed in a sandbox and can only access a whitelist of global variables, such as Math and Date. You should not attempt to access user-defined global variables in template expressions.


##Directives

Directives are with

Special properties of the v- prefix. The value of a directive attribute is expected to be a single JavaScript expression (v-for is the exception, which we'll discuss later). The responsibility of the directive is to reactively apply its associated effects to the DOM when the value of the expression changes. Looking back at the example we saw in the introduction: 

<p v-if="seen">现在你看到我了</p>

Here, the

v-if directive will insert/remove based on the true or false value of the expression seen <p> element.


parameter

Some commands can receive a "parameter", represented by a colon after the command name. For example, the v-bind directive can be used to update HTML attributes responsively: 

<a v-bind:href="url">...</a>

where href is a parameter telling v-bind The directive binds the href attribute of this element to the value of the expression url.

Another example is the v-on directive, which is used to listen to DOM events: 

<a v-on:click="doSomething">...</a>

The parameter here is the name of the event to be listened to. We'll also discuss event handling in more detail.


Dynamic parameters

##2.6.0 Newly added

Starting from 2.6.0, JavaScript expressions enclosed in square brackets can be used as parameters of a command: 

<a v-bind:[attributeName]="url"> ... </a>

The

attributeName here will be dynamically evaluated as a JavaScript expression. value, the obtained value will be used as the final parameter. For example, if your Vue instance has a data attribute attributeName with the value "href", then this binding will be equivalent to v -bind:href.

Similarly, you can use dynamic parameters to bind a handler function to a dynamic event name: 

<a v-on:[eventName]="doSomething"> ... </a>

Similarly, when the value of

eventName is " focus", v-on:[eventName] will be equivalent to v-on:focus.

Constraints on the value of dynamic parameters

Dynamic parameters are expected to evaluate to a string, and the value is

null in exceptional cases. This special null value can be used to explicitly remove a binding. Any other non-string value will trigger a warning.

Constraints on dynamic parameter expressions

Dynamic parameter expressions have some syntax constraints because certain characters, such as spaces and quotes, are placed in HTML The attribute name is invalid. Likewise, you need to avoid capitalizing key names when using templates in the DOM.

For example, the following code is invalid: 

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

A workaround is to use an expression without spaces or quotes, or to replace such a complex expression with a computed property.

In addition, if you use templates in the DOM (write the template directly in an HTML file), you need to note that the browser will force all attribute names to lowercase: 

<!-- 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]` -->
<a v-bind:[someAttr]="value"> ... </a>


Modifier

Modifier (modifier) ​​is a special suffix specified by a half-width period. It is used to indicate that an instruction should be processed in a special way Binding. For example, the

.prevent modifier tells the v-on directive to call event.preventDefault() for the triggered event: 

<form v-on:submit.prevent="onSubmit">...</form>

Next You'll see other examples of modifiers as you explore features like

v-on and v-for.


Abbreviations

v- The prefix serves as a visual cue to identify Vue-specific features in the template. When you are using Vue.js to add dynamic behavior to existing tags, the v- prefix is ​​helpful. However, for some frequently used instructions, it will feel cumbersome to use. . Also, the v- prefix becomes less important when building a SPA - single page application where Vue manages all templates. Therefore, Vue provides specific abbreviations for the two most commonly used instructions, v-bind and v-on:


v-bind abbreviation

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

…


##v-on abbreviation 

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

…

They may look slightly different than normal HTML, but

: is the same as @ for attribute names They are all legal characters and can be parsed correctly in all browsers that support Vue. Also, they will not appear in the final rendered markup. Abbreviation syntax is completely optional, but as you understand their role better, you'll be glad you have them.