Vue.js Template Syntax

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

The core of Vue.js is a system that allows you to declaratively render data into the DOM using simple 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 text interpolation using {{...}} (double curly braces):

Text interpolation

<div id="app"> <p>{{ message }}</p> </div>

Try it Yourself »

Html

Use the v-html directive to output HTML code:

v-html Directive

<div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>Example</h1>' } }) </script>

Try it Yourself »

Attributes

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

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

v-bind Directive

<div id="app"> <label for="r1">Change the color</label><input type="checkbox" v-model="use" id="r1"> <br><br> <div v-bind:class="{'class1': use}">v-bind:class Directive</div> </div> <script> new Vue({ el: '#app', data:{ use: false } }); </script>

Try it Yourself »

Expressions

Vue.js provides full support for JavaScript expressions.

JavaScript Expressions

<div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id">Example</div> </div> <script> new Vue({ el: '#app', data: { ok: true, message: 'EXAMPLE', id : 1 } }) </script>

Try it Yourself »

Directives

Directives are special attributes with the v- prefix.

Directives are used to apply certain behaviors to the DOM when the value of the expression changes. Example:

Example

Try it Yourself »

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

Arguments

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

Example

<div id="app"> <pre><a v-bind:href="url">Example</a></pre> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.example.com' } }) </script>

Try it Yourself »

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:

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

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

Modifiers

Modifiers are indicated by a half-width period.special suffixes, used to indicate that a directive should be bound in a special way. For example,.preventThe modifier tellsv-onthe directive to call on 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:

Two-way Data Binding

<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: '#app', data: { message: 'Example!' } }) </script>

Try it Yourself »

v-modelThe directive is used to create two-way data binding on form control elements such as input, select, textarea, checkbox, radio, etc., and automatically updates the value of the bound element based on the value in the form.

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

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

String Reversal

<div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse String</button> </div> <script> new Vue({ el: '#app', data: { message: 'Example!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script>

Try it Yourself »

Filters

Vue.js allows you to define custom filters, which are used for some common text formatting. Indicated by the "pipe symbol", the format is as follows:

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

The filter function accepts the value of the expression as its first argument.

The following example capitalizes the first letter of the input string:

Example

<div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'example' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>

Try it Yourself »

Filters can be chained:

{{ message | filterA | filterB }}

Filters are JavaScript functions, so they can accept arguments:

{{ message | filterA('arg1', arg2) }}

Here, message is the first argument, the string 'arg1' will be passed to the filter as the second argument, and the value of the arg2 expression will be evaluated and then passed to the filter as the third argument.

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>

Other Extensions