Getting Started with Vue.Js

An Excellent Framework to Work and Get Started Quickly

I am basically a Junior Angular Developer, but recently I looked at the code of the Application written in Vue.Js, the syntax of the application looked very simple and easy to understand, that was only one reason for giving some consideration about learning VUE. Being working on a first developer job, I have to learn new things in order to grow, so for the growing purpose it is very important to work on the side projects, so for side projects, I decided to learn VUE as I felt that it is quick to get started and easy to learn as well.

What is Vue.Js?

Vue.Js is a Progressive Framework for building a small scale, highly interactive, and fast applications. Vue.Js Starts with some core concepts to strong highly sophisticated concepts such as components and State-Management. Vue.Js is best for small single-page applications where the performance and the size of the build are very important.

In this Article We Will Be Looking at How to Get Started with Vue.Js and Writing and Understanding the Hello World Application using Vue.Js.

So Let’s Get Started

First of All, While Learning a New thing, it is very important to have all the resources that can be used to learn. So here I am providing the link to the official documentation of the Vue.Js. As the documentation is the best way to learn about anything.

Official Vue.Js Documentation

Step No 1

In this step, we will be adding the Vue.Js Library to our Application and there are multiple ways to do this, but for learning purpose and for the sake of simplicity we will be working with the CDN, that we can simply copy into our applications and get started with VUE.Js quickly.

Select Any One of the Above to Work with.

Step No 2

Creating a Simple JavaScript file in which we will be dealing with Vue instance and data and adding that file just above the closing tag of the body.

Adding the External Js File to Work With

Now As we are all Set Let’s Start Writing the Hello World Application, sometimes it feels very boring to write the Hello World Application but it provided an excellent view of how the thing that we are going to learn will be after some time

Creating a Vue instance in External JS File

Creating a Simple Vue Instance to Work with

Here we are simplifying doing the following things.

1. Creating a new Vue instance using the New keyword.
2. We will be attaching this instance in HTML file with that element of div who has the Id of “app”.
3. In data, we have defined a simple property named “message” that contains the hello world message.

Rendering the Data in HTML

Rendering the Hello World Message into the HTML

Here we can see that a div has an id of app, that makes it associate with the el property in the JS file that made earlier in which we defined, el and data.
The ‘message’ in the double curly braces will be printing the string assigned to the message in the Js file.

So Writing and Getting Started with Vue.js is that simple and for the next post, we will be talking about how to render a list efficiently and easily in Vue and we will also be talking about directives in Vue.Js as well.