Vue3 Template Syntax
Vue uses HTML-based template syntax that allows developers to declaratively bind the DOM to the underlying Vue instance's data.
The core of Vue is a system that enables you to use simple template syntax to declaratively render data into the DOM.
Combined with the reactive system, Vue can intelligently calculate the minimal cost of re-rendering components and apply it to DOM operations when the application state changes.
Interpolation
Text
The most common form of data binding is using {{...}} (double curly braces) for text interpolation:
Text Interpolation
<div id="app">
<p>{{ message }}</p>
</div>
The content inside the {{...}} tags will be replaced with the value of the message property from the corresponding component instance. If the message property changes, the content inside the {{...}} tags will update accordingly.
If you don't want the content to change, you can use the v-once directive to perform a one-time interpolation, where the content will not update when the data changes.
<span v-once>This will not change: {{ message }}</span>
Html
Use the v-html directive to output HTML code:
v-html Directive
<div id="example1" class="demo">
<p>Using double curly braces for text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
<script>
const RenderHtmlApp = {
data() {
return {
rawHtml: '<span style="color: red">This will appear red!</span>'
}
}
}
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>
Attributes
Values in HTML attributes should use the v-bind directive.
<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isButtonDisabled">Button</button>
In the above code, if the value of isButtonDisabled is null or undefined, the disabled attribute will not be included in the rendered <button> element.
The following example checks the value of use, and if true, applies the class1 style; otherwise, it does not use the class:
v-bind Directive
<div id="app">
<label for="r1">Change 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>
const app = {
data() {
return {
use: false
}
}
}
Vue.createApp(app).mount('#app')
</script>
Expressions
Vue.js provides full JavaScript expression support.
JavaScript Expressions
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">tutorialpro.org</div>
</div>
<script>
const app = {
data() {
return {
ok: true,
message: 'tutorialpro!!',
id: 1
}
}
}
Vue.createApp(app).mount('#app')
</script>
Expressions are parsed as JavaScript within the current active instance's data scope. One limitation is that each binding can only contain a single expression, so the following examples will not work:
<!-- This is a statement, not an expression: -->
{{ var a = 1 }}
<!-- Flow control will not work, use ternary expressions -->
{{ if (ok) { return message } }}
Directives
Directives are special attributes with the v- prefix.
Directives apply certain behaviors to the DOM when the value of the expression changes. For example:
Example
<div id="app">
<p v-if="seen">Now you see me</p>
</div>
<script>
const app = {
data() {
return {
seen: true /* Change to false to hide the message */
}
}
}
Vue.createApp(app).mount('#app')
</script>
Here, the v-if directive will insert or remove the <p> element based on the truthiness of the value of seen.
There are many other directives, each with its own special functionality. For example, the v-for directive can bind array data to render a list of items:
Example
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.text }}
</li>
</ol>
</div>
<script>
const app = {
data() {
return {
sites: [
{ text: 'Google' },
{ text: 'tutorialpro' },
{ text: 'Taobao' }
]
}
}
}
Vue.createApp(app).mount('#app')
</script>
Arguments
Arguments are specified after the directive name with a colon. For example, the v-bind directive is used to reactively update HTML attributes:
Example
<div id="app">
<p><a v-bind:href="url">tutorialpro.org</a></p>
</div>
<script>
const app = {
data() {
return {
url: 'https://www.tutorialpro.org'
}
}
}
Vue.createApp(app).mount('#app')
</script>
Here, href is the argument, telling the v-bind directive to bind the element's href attribute to the value of the url expression.
Another example is the v-on directive, which is used to listen for DOM events:
<!-- Full syntax -->
<a v-on:click="doSomething"> ... </a>
<!-- Shorthand -->
<a @click="doSomething"> ... </a>
<!-- Dynamic argument shorthand (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
The argument here is the event name to listen for.
Modifiers
Modifiers are special suffixes indicated by a dot, which indicate 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:
<form v-on:submit.prevent="onSubmit"></form>
User Input
In input boxes, 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>
const app = {
data() {
return {
message: 'tutorialpro!'
}
}
}
Vue.createApp(app).mount('#app')
</script>
The v-model directive is used to create two-way data bindings on form input, textarea, and select elements. It automatically updates the bound element's value based on the form input's value.
Button events can be listened to using v-on to respond to user input.
The following example reverses the string when the user clicks the button:
String Reversal
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Test Example - tutorialpro.org(tutorialpro.org)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse String</button>
</div>
<script>
const app = {
data() {
return {
message: 'tutorialpro!'
}
},
methods: {
reverseMessage() {
this.message = this.message
.split('')
.reverse()
.join('')
}
}
}
Vue.createApp(app).mount('#app')
</script>
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>