Vue3 Template Syntax

Vue uses an HTML-based template syntax that allows developers to declaratively bind the DOM to the data of the underlying Vue instance.

At the core of Vue is a system that enables you to declaratively render data into the DOM using a concise template syntax.

Combined with the reactivity system, when the application state changes, Vue can intelligently calculate the minimum cost of re-rendering components and apply it to DOM operations.

Interpolation

Text

The most common form of data binding is using{{...}}text interpolation with double curly braces:

{{...}}The content of the tag will be replaced by the corresponding component instance'smessageproperty value, ifmessagethe property value changes,{{...}}the tag content will also update.

If you do not want to change the content of the tag, you can usev-oncethe directive to perform a one-time interpolation. When the data changes, the content at the interpolation will not update.

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

Html

Use the v-html directive to output HTML code:

Attributes

Values in HTML attributes should use the v-bind directive.

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

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

In the above code, if the value of isButtonDisabled is null or undefined, the disabled attribute will not even be included in the rendered <button> element.

The following example checks the value of use. If it is true, it uses the style of class1; otherwise, it does not use that class:

Expressions

Vue.js provides full support for JavaScript expressions.

Expressions are parsed as JavaScript in the data scope of the current active instance. There is a limitation: each binding can only contain a single expression, so the following examples will not work:

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

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

Directives

Directives are special attributes with the v- prefix.

Directives are used to apply certain behaviors to the DOM when the value of an expression changes. See the following example:

Here, the v-if directive will decide whether to insert the p element based on the value of the expression seen (true or false).

There are many other directives, each with a specific function. For example, the v-for directive can bind data from an array to render a list of items:

Arguments

Arguments are indicated after a directive with a colon. For example, the v-bind directive is used to reactively update HTML attributes:

Here, href is the argument, telling 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 is used to listen for DOM events:

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

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

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

Here the argument is the name of the event being listened to.

Modifiers

Modifiers are indicated by a half-width period.as special suffixes, used to indicate that a directive should be bound in a special way. For example,.preventThe modifier tellsv-onthe directive to call for the triggered eventevent.preventDefault()：

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

User Input

In the input field, we can use the v-model directive to achieve two-way data binding:

v-modelThe directive is used to create two-way data binding on form control elements such as input, select, textarea, checkbox, and radio. Based on the values on the form, it automatically updates the values of the bound elements.

For button events, we can use v-on to listen for events and respond to user input.

The following example reverses the string after the user clicks the button:

Shorthands

v-bind Shorthand

Vue.js provides special shorthands for the two most commonly used directives:

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

v-on Shorthand

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