John Au-YeungSubscribe to my email list now at http://jauyeung.net/subscribe/
Follow me on Twitter at https://twitter.com/AuMayeung
Many more articles at https://medium.com/@hohanga
Even more articles at http://thewebdev.info/
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 our first Vue.js app. We’ll look at data binding, conditional rendering, and loops.
Getting Started
Vue.js is designed to be a progressive framework building UIs. It can be added incrementally to an existing app that uses other libraries.
Also, it can be used to create a new standalone app. Like other frameworks like Angular and React, it can be used to create a single-page app with modern tooling with the Vue CLI and its own ecosystem of libraries.
To get started quickly, we can use a script tag to include the development version of the Vue.js framework, which includes the warnings that are only available when using this build. It makes development easier.
We can include the development build by writing:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
in our index.html file or:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
for the production build.
To create our first app, we first create index.html and add:
<!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">
{{ message }}
</div>
<script src="./src/index.js"></script>
</body>
</html>
Then in src/index.js , we add:
new Vue({
el: "#app",
data: {
message: "Hello"
}
});
Then we should see Hello printed on the browser tab.
What we did in index.html is that we added the Vue.js framework with:
<script src="[https://cdn.jsdelivr.net/npm/vue/dist/vue.js](https://cdn.jsdelivr.net/npm/vue/dist/vue.js)"></script>
Then we added the Vue.js template as follows:
<div id="app">
{{ message }}
</div>
Next, we added:
<script src="./src/index.js"></script>
so that we can load our own JavaScript code that uses Vue.js to initialized the app.
Then in src/index.js , we add:
new Vue({
el: "#app",
data: {
message: "Hello"
}
});
so that we can load our app with the message variable set to the'Hello' string, which is rendered in index.html when we have:
{{ message }}
The double curly braces indicate that it’s a property of the data and it’ll fill in the message placeholder with the value of the message property of data in the object that we passed into the Vue constructor.
Another way to bind element attributes to property value in the data property is to use v-bind:title .
In index.html , we write:
<!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">
<span v-bind:title="message">
Hello
</span>
</div>
<script src="./src/index.js"></script>
</body>
</html>
Then when we keep src/index.js the same, we’ll see a tooltip that says Hello when we hover our mouse over it.
What we did was setting the title attribute of the span to the value of data.message in the object that we passed into the Vue constructor.
v-bind is called a directive, and it’s used to set the value of the title attribute dynamically in the code above.
Conditionals
We can conditionally display something on the screen by using the v-if directive.
To use it, we can 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">
<span v-if="visible">
Hello
</span>
</div>
<script src="./src/index.js"></script>
</body>
</html>
Then when we write the following in src/index.js as follows:
new Vue({
el: "#app",
data: {
visible: false
}
});
We see nothing.
This is because we hid the span with by setting visible to false and passing it to v-if . When we have a v-if directive added to an element. It’s only displayed if the value we passed into the v-if directive is true .
v-if=”visible” means that the content of this element will be displayed when data.visible is true .
So if we change src/index.js to:
new Vue({
el: "#app",
data: {
visible: true
}
});
We should see Hello on the browser screen.
Loops
We can use the v-for directive for looping through arrays that are values of a property of data .
For example, we can use it as follows. In index.html , we write:
<!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">
<ul>
<li v-for="person in persons">
{{person.name}}
</li>
</ul>
</div>
<script src="./src/index.js"></script>
</body>
</html>
Then in src/index.js, we write:
new Vue({
el: "#app",
data: {
persons: [{ name: "Mary" }, { name: "Jane" }, { name: "Joe" }]
}
});
Then we get:
Mary
Jane
Joe
in our browser screen.
What the code above did was that we set data.persons in index.js to an array, which can then be looped through by the v-for directive in index.html .
Vue.js then rendered the value of the name property of each entry in each li element as we specified in the template:
<ul>
<li v-for="person in persons">
{{person.name}}
</li>
</ul>
and so we get the entries listed in a list.
Conclusion
We can create a simple Vue.js app by including the Vue.js framework in our HTML script tag and then we can add the code for our Vue.js app in a JavaScript file.
Then we can use directives to display items from the data property of the object that we pass into the Vue constructor in templates.
We can use the v-bind directive to set data attribute values. v-if to display things conditionally, and v-for to display things from array entries by looping through it and rendering the content.
