Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at how to create and use templates to display data and handle events.
How it Works
Vue templates let us bind data to the DOM.
Vue compiles the template into Virtual DOM render functions. It can figure out the minimal number of components to re-render and minimize DOM manipulation when data changes.
Interpolations
The most basic form of data binding is text interpolation with double curly braces.
For example, we can write:
<p>{{foo}}</p>
To show the value of foo from a Vue instance or component.
The code above will be updated when foo updates.
We can keep it from updating after the first render by using the v-once directive as follows:
<p v-once>{{foo}}</p>
Raw HTML
We can also put raw HTML into an element with the v-html directive.
This lets us add HTML elements and formatting into an element.
For example, if we have the following in src/index.js :
new Vue({
el: "#app",
data: {
rawHtml: "<b>bar</b>"
}
});
and the following in index.html :
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-html="rawHtml"></p>
</div>
<script src="./src/index.js"></script>
</body>
</html>
Then we get bar bolded displayed since the inner HTML of the p element is <b>bar</b> .
When we’re using this, we have to sanitize the HTML so that it won’t contain any code. This is to prevent cross-site scripting attacks since code will be run if there are any when we pass in a value to the v-html directive.
Attributes
We can set values of HTML element attributes dynamically with v-bind as follows.
In src/index.js , we write:
new Vue({
el: "#app",
data: {
isButtonDisabled: true
}
});
Then when we write the following in index.html :
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-bind:disabled="isButtonDisabled">Button</button>
</div>
<script src="./src/index.js"></script>
</body>
</html>
Then since we set the isButtonDisabled property to true , the button will be disabled. This also apply to any other truthy value.
On the other hand, if we set it to false , we see that the button is disabled. This also applies to other falsy values like null , undefined , 0 and empty string.
JavaScript Expressions
We can add any other JavaScript expressions between the curly braces.
For example, we can write:
{{ number + 10 }}
{{ yes ? 'YES' : 'NO' }}
{{ str.split('').reverse('').join('') }}
Also, we can write expressions as the value of the v-bind directive as follows:
<div v-bind:id="`div-${id}`"></div>
Statements will not run inside the curly braces. For example:
{{ let a = 1 }}
will give us an error. We’ll get the error ‘avoid using JavaScript keyword as the property name: “let”’ in the console.
We also can’t run conditional statements within curly braces:
{{ if (id) { return id } }}
We’ll get the error ‘avoid using JavaScript keyword as the property name: “if”’.
Directives
Directives are special attributes with the v- prefix. We can pass in a single JavaScript expression as the value.
v-for can accept more than one expression separated by ; .
For example, we can conditionally display content with v-if :
<p v-if="show">Hello</p>
If show is truthy, then we’ll see Hello . Otherwise, it won’t be shown.
Arguments
Some directive takes an argument, which is denoted by a colon after the directive name.
For example, we can set the href value of an a element by writing:
<a v-bind:href="'https://medium.com'">Medium </a>
The v-on directive also takes an argument. For example, we can handle the click event of an element by writing:
<a v-on:click="onClick"> Click Me </a>
Then the onClick method in our Vue instance or component will be run when we click on the a element.
Dynamic Arguments
Since Vue.js 2.6.0, we can use a JavaScript expression as an argument for a directive.
For example, we can use it as follows. In src/index.js , we write:
new Vue({
el: "#app",
data: {
click: `${"cl"}${"ick"}`
},
methods: {
onClick() {
alert("clicked");
}
}
});
Then in index.html , we can use a dynamic argument as follows:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<a v-on:click="onClick"> Click Me </a>
</div>
<script src="./src/index.js"></script>
</body>
</html>
This will reference the value of the click property of the data property in our Vue instance, and so we actually have v-on:click .
And therefore, when we click the a tag, we get an alert box with the clicked text displayed.
Dynamic argument expressions must evaluate to a string or null .
Spaces and quotes also aren’t valid inside the brackets.
Conclusion
We can create templates in various ways. The most basic is interpolation with the double curly brace syntax. We can put any JavaScript expression between the braces.
To set the values of attributes dynamically, we can use the v-bind directive. The value can be any JavaScript expression.
Some directives take an argument, which is the part of the directive name after the colon. Again the directive’s value can be any JavaScript expression in this case.
Dynamic arguments can be used since Vue 2.6.0. We can use it by putting an expression in square brackets.
