What is Vue.js?
Vue is a progressive front end framework that can be added easily to an existing app. We can also make a single page app from it. This means that we can use it to add new functionality to existing apps or to use it to create new apps.
It's a component-based framework, which means that we build apps with Vue by nesting components and passing data in between them.
Getting Started
We can get started by creating a script tag to add the Vue.js framework to our code.
There's a development version of the framework which we can add by writing:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
The development version isn't minified, so it shouldn't be used in production.
The production version can be added by writing:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Creating our First Vue App
We can begin by creating a project folder and then adding an index.html and an index.js file to hold our HTML and JavaScript code respectively.
Then, in index.js we have to create a new Vue instance, which is an entry point of our Vue app.
To do this, we can write the following code in index.js:
new Vue({
el: "#app",
data: {
message: "Hello"
}
});
In the code above, we create a new instance Vue by passing in an object with various options.
The el property tells Vue to put our app inside a div element with ID app.
The data property has the initial data which we can use in templates.
Then, in index.html, we write the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>App</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="index.js"></script>
</body>
</html>
The HTML code above has the script tags for the Vue framework located at the top, and another script tag for our own code located at the bottom.
In the div element with ID app, we added the double curly braces to display the string 'hello' from data.message in index.js.
The automatic updating of the template's data from the Vue instance is called data binding.
Data can also go from the template back to the Vue instance as we will see later.
At this point, we should see:
Hello
on the screen when we load the browser.
In Vue.js, any valid JavaScript expression can be placed in between the double curly braces.
Some examples of this are:
{{ num + 1 }}
or:
{{ messages.reverse() }}
Conditional Rendering
We can conditionally render items on the screen by using the v-if directive. Directives are Vue code that we can apply to make an element do something.
For example, we can write the following code:
index.js:
new Vue({
el: "#app",
data: {
message: "Hello"
}
});
index.html:
<p v-if="Math.random() > 0.5">
{{message}}
</p>
<p v-else>
No Message
</p>
Then, when we load the browser or refresh it, we see that 'Hello' will be displayed sometimes, since it's only displayed when Math.random() returns something bigger than 0.5.
The v-else directive is for displaying something if the condition in v-if is false. In the code above, if Math.random() returns some number less than 0.5, then we'll see “No Message”.
Accepting Inputs
A Vue app can take inputs via the v-model directive. This directive accepts a variable as the value.
v-model gets the input and sets it to the data in the Vue instance. It'll also get the data from the Vue instance and display it on the template. We call this 2-way binding since the data is automatically set and data already set is also passed back to the template.
For example, if we have the following code:
index.js:
new Vue({
el: "#app",
data: {
message: "Hello"
}
});
<input v-model="message" />
<p>{{message}}</p>
When the page first loads, we see the word 'Hello' inside the input element. This happens because the value of data.message is sent from the Vue instance to the input by the v-model directive.
Then, when we type in something in the input, it'll be displayed in the p element below it. This is because the data typed into the input element is sent to the Vue instance that we created in index.js
The data we typed in is set in data.message in the object that we passed into new Vue.
Handling Events
JavaScript events have to be handled so that the app can properly react when the user performs an action.
Vue makes this easy by providing the v-on directive. @ is shorthand for v-on. For example, v-on:click is the same as @click. To handle user click events, we can use the v-on:click="onClick". This calls the onClick method in the object that we passed into the Vue instance when the user clicks whatever has this directive applied.
The click in v-on:click is called an argument. This is because we can replace click with other event names that we define or are built into the browser.
Using this knowledge, we can create a button that pops up a message as follows:
index.js:
new Vue({
el: "#app",
methods: {
onClick() {
alert("Hello");
}
}
});
<div id="app">
<button v-on:click="onClick">Click Me</button>
</div>
When we click the Click Me button, our code calls the onClick method because we have v-on:click="onClick" in the template. Anything in the object can be called from the template.
Therefore, we should see an alert box that says 'Hello' pop up when we click the Click Me button.
Displaying Collections of Data
We can display collections of data easily with the v-for directive. It works with arrays and objects.
For example, it enables us to display items from an array as a list as follows:
index.js:
new Vue({
el: "#app",
data: {
persons: [{ name: "Mary" }, { name: "Phil" }, { name: "Jane" }]
}
});
index.html:
<div id="app">
<ul>
<li v-for="person of persons">{{person.name}}</li>
</ul>
</div>
The code v-for="person of persons" will loop through the data.persons array in index.js and display all the items by getting each entry's name property and then display the item in a li element. This is because we added v-for="person of persons" in a li element.
Also, v-for="person of persons" and v-for="person in persons" are the same.
In the end, we should see:
Mary
Phil
Jane
We can also use v-for to display the key-value pairs of an object as follows:
index.js:
new Vue({
el: "#app",
data: {
obj: {
foo: "a",
bar: "b",
baz: "c"
}
}
});
index.html:
<div id="app">
<ul>
<li v-for="(value, name) in obj">{{name}} - {{value}}</li>
</ul>
</div>
The key-value pairs from data.obj are displayed in li elements:
So we get:
foo - a
bar - b
baz - c
Creating Components
Vue is useful because it lets us divide up our app into components.
To create a simple component, we can use the Vue.component method as follows:
index.js:
Vue.component("custom-input", {
data() {
return {
message: "foo"
};
},
methods: {
submit() {
alert(this.message);
}
},
template: `
<div>
<input v-model='message'>
<p>{{message}}</p>
</div>
`
});
new Vue({
el: "#app"
});
index.html:
<div id="app">
<custom-input></custom-input>
</div>
In the code above, we created a component that's available everywhere by calling the Vue.component method with the name of the component as the first argument.
The second argument is the options object for creating the component. It's slightly different from what we have in the object that we passed in to create the Vue instance.
The data property is a function instead of an object. This way, the state won't be exposed to the outside.
methods and template are the same as the ones we set in the object that we use to create the Vue instance.
In index.html, we reference our custom-input component by writing:
<div id="app">
<custom-input></custom-input>
</div>
Note that we can only reference components inside the element that we render our Vue app in. In this case, it would be the div with ID app. We can also reference components in another component's template or recursively in its own template.
Conclusion
Vue is a component-based framework that we can use to create front-end apps in a clean and expressive way.
It has built-in directives for model binding, conditional rendering, and rendering list of items.
Hopefully, this tutorial has helped you quickly understand the basic aspects of Vue and motivated you to start building something unique.
Before deploying your commercial or enterprise Vue apps to production, make sure you are protecting their code against reverse-engineering, abuse, and tampering by following our tutorial.
Top comments (2)
Very nice introduction thanks!!
Thanks very much for reading!