YouTip

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

Vue's core is a system that allows 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 minimal cost of re-rendering components and apply it to DOM operations.

Example

---

Interpolation

Text

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

Text Interpolation

Try it »

The content of the {{...}} tag will be replaced with the value of the message property in the corresponding component instance. If the value of the message property changes, the content of the {{...}} tag will also update.

If you don't want the tag's content to change, you can use the v-once directive to perform one-time interpolation. When the data changes, the content at the interpolation point will not update.

This will not change: {{ message }}

HTML

Use the v-html directive to output raw HTML code:

v-html Directive

const RenderHtmlApp = { data() { return { rawHtml: 'This will be red!' } } } Vue.createApp(RenderHtmlApp).mount('#example1')

Try it »

Attributes

HTML attribute values should use the v-bind directive.

For boolean attributes, the conventional value is true or false. If the attribute value is null or undefined, the attribute will not be included in the rendered element.

Button

In the code above, 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, the style of class1 is applied; otherwise, the class is not used:

v-bind Directive

const app = { data() { return { use: false } } } Vue.createApp(app).mount('#app')

Try it »

Expressions

Vue.js provides full support for JavaScript expressions.

JavaScript Expressions

const app = { data() { return { ok: true, message: '!!', id: 1 } } } Vue.createApp(app).mount('#app')

Try it »

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

<!-- This is a statement, not an expression: -->
{{ var a = 1 }}

<!-- Flow control also won't work, please use ternary expressions -->
{{ if (ok) { return message } }}

---

Directives

Directives are special attributes prefixed with v-.

Directives apply certain behavior to the DOM when the value of the expression changes. Here is an example:

Example

const app = { data() { return { seen: true /* Change to false, and the message will not be displayed */ } } } Vue.createApp(app).mount('#app')

Try it »

Here, the v-if directive will conditionally insert the <p> element based on the value of the expression 'seen' (true or false).

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

Example

const app = { data() { return { sites: [ { text: 'Google' }, { text: '' }, { text: 'Taobao' } ] } } } Vue.createApp(app).mount('#app')

Try it »

Arguments

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

Example

const app = { data() { return { url: '' } } } Vue.createApp(app).mount('#app')

Try it »

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 to DOM events:

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

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

<!-- Shorthand for dynamic argument (2.6.0+) -->
<a @="doSomething"> ... </a>

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

Modifiers

Modifiers are special suffixes indicated by a dot (.), used to specify that a directive should be bound in a special way. For example, the .prevent modifier tells the v-on directive to call event.preventDefault() on the triggered event:

---

User Input

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

Two-way Data Binding

const app = { data() { return { message: '!' } } } Vue.createApp(app).mount('#app')

Try it »

The v-model directive is used to create two-way data bindings on form elements like input, select, textarea, checkbox, radio, etc. It automatically updates the bound element's value based on the form's value.

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

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

String Reversal

const app = { data() { return { message: '!' } }, methods: { reverseMessage() { this.message = this.message .split('') .reverse() .join('') } } } Vue.createApp(app).mount('#app')

Try it »

---

Shorthands

v-bind Shorthand

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

<!-- Full syntax -->
<a v-bind:href="url"></a>

<!-- Shorthand -->
<a :href="url"></a>

v-on Shorthand

<!-- Full syntax -->
<a v-on:click="doSomething"></a>

<!-- Shorthand -->
<a @click="doSomething"></a>