Basics before learning Vue JS

A Basic Tutorial for Beginners who want to learn VueJS from Zero. I follow this approach while training new Interns at Webfort Technologies

If you are a beginner the concepts presented in this post will really help you.

Why VueJS is an excellent choice?

VueJS is an excellent library and very powerful one. I love it. I prefer it over Angular and React. Just because of its simplicity.

Sometimes you may just want to use the library only on a part of the Project and page and VueJS allows you to use it for that particular portion. This helps you slowly introducing VueJS to your project which is great.

VueJS is easy and beginners would quickly grasp it as compared to similar libraries such as Angular or React.

First things First.
Data is the Starting Point for Any Application.

Data is one of the indispensable part of any application irrespective of programming language or framework.

Structuring data is a art.

You can think data structure similar to how you organise the things at your home or office. If you properly organise it you will always find it easier to get things.

It is all about strategically creating places where we will keep each data so that it’s easier to perform operations such as search, update and delete.

Learning a bit more about types of data and how we can structure them.

An application can have many types of data and before we decide how to structure them we need to understand a few important types.

1. Simple Textual Data. For example a story or article.
2. Related Data. For example Personal details of a person who is registering on to an Application. for example name, email and phone no.
3. Tabular Data : For example top 10 movies on IMDB with the movie name and their release date and ranking.
4. Nested Data : User with his photo albums and his photos Inside the Photo Album.

There are many type of data storages digital and non-digital and storing each of these data into these storages and format has their own advantages and disadvantages.

Storing & structuring data on Paper.
Just so that we can understand how we store data with a simpler example first.

Simplest and most ancient form of storing data is on paper inside notebooks. From the above all of the above can be stored into a sheet of paper but the most suitable is Simple Data which can be like a story book or Novel. Which can be divided into chapters and page no’s recorded in a table of index.

Related data can be saved into data and can be recorded simply on paper.

Tabular data can also be recorded on paper by drawing tables. But once you put the data on paper its difficult to sort the data Alphabetically unless you put the data that way. Also if the data is not sorted it would be difficult to find any records.

How to keep Nested Data on paper
Nested data is fairly difficult to record on paper. The only way to keep it in a good way is to keep different books creating a relation based on a index.

In the below diagram you can see and example of how we may keep data into different books.

Storing Data into Excel or a Database System.

Similar to how we have organised data into different books on paper in the above section. We can organise Nested data into different tabs or sheets on Excel.

Also In Database we can keep the same data into different tables relating them based on primary key and foreign keys.

Storing Data in JSON: because in Vue JS we store data in JSON

JSON stands for Javascript object notion. JSON is very popular as a lightweight data exchange format.
It has a self explanatory structure and we can keep nested data into it without needing to create relations.

VueJs applications keep data as an Javascript Object. So before we learn about VueJS. It’s important to cover basics about JSON.

In real world the data is nested. JSON supports nested data, and hence it becomes very easy to keep data into it in comparison to keeping data in relational databases.