Vue js is one of the most loving javascript frameworks among developers. It comes with many great features that make it into the top frameworks list. The most amazing features of Vue is its lightweight and beginner friendly. So before you start with this brief tutorial take a look at the reasons to love Vue js. That post also includes the installation process so check that one first. In this Vue js tutorial, I will explain the various terms related to Vue.

Features of Vue js

vue js logo

It provides a huge list of awesome features. First of all, Vue provides data binding which helps in creating superb UX. Rather than this, it provides unique templating logic, directives, custom filters and much more. We can even easily create CSS transition and animations with Vue. In addition to all Vue makes event handling so easy. So that’s a brief detail of the features of Vue.

Vue js tutorial

vue js

Directives

The term directives are much popular nowadays. Whether you are using Angular or Vue you will use directives in both. In Vue directive is a special attribute with the v- prefix that performs an action into the DOM.

Eg: <span v-text=”msg”></span>

Loops and conditions

We all are familiar with loops and conditions. Loops are used to perform an action multiple times. Conditions are used to change the flow of a code block. Vue provides a simple way to use loops and conditions directly into our template.

<span v-if="show">Show</span>
<span v-else>Hide</span>

The above code will print show on the screen only if the value of the show is true. Else it will print Hide as we have used v-else directive.

<ul>
	<li v-for="user for users">
		{{user.name}}
	</li>
</ul>

Loops are specially used to print values of a list. The above code will print all the user’s names available in the user’s object.

Class and style bindings

We can bind a class or a style with an HTML element. It works great when we want to change the style when an event occurs.

<span v-bind:class="{done: isDone}"></span>

The above code will apply the class done to the span only when isDone is true.

Vue js components

Components are one of the brilliant features of Vue Js. It provides encapsulation and good organization of codes. We can divide our code into smaller components. A component contains 3 basic things a template element, a script tag and a style tag. So by using components, we can follow the DRY (Don’t repeat yourself) rule. On the other side, it’s really easy to use a component. All we need to do is just create and register it.

Vue js routing

Routing is a beautiful way to route users to different pages. Vue provides a smart and simple way to route. Basically, route doe’s an AJAX request so it’s much better than using simple anchor tags to redirect. In this Vue js tutorial, we will learn to work with Routers also.

So we have learned the basics of Vue. Therefore it’s time to start coding.

Vue js API

First of all, go to the directory where you want to create your Vue app. Now open command prompt out there and run the following command.

I am assuming that you have already installed Vue. If you haven’t yet installed it yet follow reasons to love Vue js.

vue init webpack projectName

You can change the projectName with anything you. It will ask for few questions in the terminal. You will just need a router so when its shows router, choose Y. After it is done, It will create a simple Vue template with an exact directory structure. Now we have to install the all the files specified in the package.json with their dependencies.

npm install

The above command will install all the things necessary for a Vue application. Now we are ready to write codes for our app.

Create a new component

First of all, run the server with the following command. As Vue Js provides a live server we can use it more efficiently.

npm run dev

It will run the live server into the specified port. Now open the src folder into a text editor and check out the components directory. That directory contains a pre-coded file we don’t need it, so remove it first. Now create a file called users.vue into the components directory. Now we have to write the code for our users component.

<template>
	<div class="test">
		<h1>{{title}}</h1>
	</div>
</template>

The above code is the template part of our app. It will render everything inside it as an HTML. The double curly braces outside the title are used for interpolation. We can render multiple HTML elements but there must be only one parent element. Everything we want to render should be kept inside the main div.

<script>
	export default {
		name: 'users',
		data() {
			return {
				title: 'Vue app'
			}
		}
	}
</script>

The script part is the main part of the component. Everything like datanamemethods should be written inside export default. The name is used to import it into main javascript files. So after that, the data is used as an immediate function which returns data to the template. Therefore the value of title we have specified here will be rendered into the template. In addition to these two, we can add style to a component as follows.

<style scoped>
	.test {
		font-family:Baskerville;
	}
</style>

The scoped ensures that its only for the current component. So that’s the way to write a component now let’s add it to our router. Go to the routes folder and open the index.js file. First of all. we need to import the users component and remove the HelloWorld import.

import Users from '@/components/Users'

Now we have to change the values of routes array as follows.

routes: [
{
	path: '/',
	name: 'users',
	component: Users
}

Now save the file and check the result in your browser. You will able to see the title we have specified i.e Vue app. Now let’s move further and check out some directives with loops and conditions.

Vue js directives, loops and conditions

name: '<h2>Vue js tutorial/h2>',
active: true,
users: [
	{ name: 'Subham Mitra', age: 20 },
	{ name: 'John Smith', age: 24 }
]

Put the above code after the title into the data section. Here the name contains HTML, active is boolean and user’s is an array of users. So now let’s move to the template part and render the data.

<span v-html="name"></span>
<ul v-if="active">
	<li v-for="user in users">
		{{user.name}} -- {{user.age}}
	</li>
</ul>

First one will render the HTML inside the name. After that, the inner part of ul will be rendered on if the active is true. We are using loops inside li to fetch each user as an object. So we have covered the basics of Vue js tutorial now its time for some moderate stuff.

Vue Js events and data binding

As a javascript developer, we all are familiar with events. Vue provides an easy way to handle events. Let’s create a simple alert for a click event.

<button v-on:click="welcome">Press</button>

The above code will bind a click event on the button. Whenever someone clicks the button it will fire the method. Finally, let’s move to the script part and add code for the method.

methods: {
	welcome: function() {
		alert("Welcome")
	}
},

Add the above code after the data inside the return block. Every method of that component should be placed inside the methods block. Now let’s see how v-model directive works.

<input type="text" v-model="title">

Now put the above code after the h1 element in the template. The value of input will now automatically update the value of the title.

Vue resource middleware

Vue resource is a middleware of Vue Js. It especially used to create API’s. Its capable of handling Http requests. So we can create get and post requests with it easily. However, it’s not only limited to these two.

First of all, we have to install it in order to use it. So run the command below to install it.

npm install vue-resource --save

Now go back to the src folder and open the main.js file. We have to import the middleware to use the Http module. We can import it as follows.

import vueResource from 'vue-resource'

Now its imported so we have to use the use method of Vue to use the middleware among all components.

Vue.use(vueResource)

So we are ready to create our Vue js API. Go to our component and follow the code shown below.

created: function() {
	this.$http.get('https://jsonplaceholder.typicode.com/users').then(function(res) {
		this.users = res.data;
	});
}

Put the above code after methodscreated is another great feature of Vue Js. Anything we write inside created runs automatically. So inside the function, we are creating a get request to a specific URL. Here I am using JSON placeholders API. As the get request will return objects we are using the then method. Inside that, we are setting the response data into our user’s array. So remove everything from the user’s array now and make it empty. Now move to the template and change user.age to user.email. Therefore everything is ready, save the file and open it in the browser and you will see 10 names with emails. So let’s move to the last section of our Vue Js tutorial.

Vue js routing

First of all, create a new file called about.vue inside of the components directory. Now write the basic component structure and just add an h1 element inside it. Save it and go back to the index.js  file of the router. Import the about component first then modify the content inside Router as follows.

export default new Router({
  	mode: 'history',
	base: __dirname,
	routes: [
		{ path: '/', component: Users},
		{ path: '/about', component: About}
	]
})

mode is set to history otherwise the URL will contain a trailing char(#). After that base is set to __dirname so that it can access the components. Finally, routes array is modified with two objects. Every object contains the relative path and component name. So its ready now let’s add it to our main template. Open the App.vue file and put the following before router-view.

<ul>
    <li><router-link to="/">Users</router-link></li>
    <li><router-link to="/about">About</router-link></li>
</ul>

Now you will be able to route to different pages easily. Anything we put inside the template of App.vue will be displayed in all the pages of the site.

Finally, we have learned the basics as well as some moderate topics in this Vue Js tutorial. Hope you guys have liked the Vue Js tutorial. So don’t forget to leave a comment if you have really liked this brief tutorial on Vue.


subham

A coder who loves to solve real-world problems through coding.

3 Comments

LeeAnah James · November 9, 2017 at 10:54 pm

How cool! My kids love coding! I hope they get into coding this advanced.

Prcek · November 15, 2017 at 3:22 pm

“vue webpack init projectName” can do nothing, “vue init webpack projectName” is right syntax.

    subham · November 15, 2017 at 6:12 pm

    Ups it’s a mistake from my side. Anyway, I have just updated it.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Books

Best JavaScript book for absolute beginners

JavaScript is one of the most popular and widely used programming languages. Basically, its used in front-end development but it’s not limited up to that. There are many great frameworks or libraries available to do Read more…

Javascript

Vue Js hybrid app development with Framework 7

Hybrid app development is growing stronger day by day. It’s much simpler and easy to learn than native app development. Basically, hybrid app frameworks give the ability to develop multi-platform apps to front-end developers. With Read more…

Javascript

Node Js MongoDB and Express a ultimate beginners guide

Node js is one of the best parts of javascript development. It gives javascript developers the power to write the backend part with javascript. However, Node js is little bit advanced and not much beginner Read more…