Vue.JS

What is VueJs ?

• Basicly, Vue.Js is a framework of JavaScript
• Vue.js povides us doing reactive and interactive Web interfaces easily and quickly 🚀

Javascript?

• It is a programming language that is supported by all browsers and allows us to make manipulations on the running page.

Framework?

Briefly, framework is a library which includes lots of functions, rules that prepared before and it makes us feel free to develop application. It offers us the necessary infrastructure to prepare a project like a bootstrap 😃.

Reactive?

It is to process the transactions made by the user directly on the page without the need to refresh the page. That’s really cool and fancy🔥

Web Interface?

Everything the end user has seen on the browser. They are all structures that arise with the use of HTML, CSS and JavaScript.

Vanilla JavaScript vs Vue.Js?

• JavaScript is a very strong language and it would not be very accurate to compare Vue.Js with JavaScripts 😃
• Vue.Js gives us lots of speed and performance 🚀

Let’s make a simple todo application with both to see the difference between Vanilla JavaSciprit and VueJs.😛

Firstly, open the VsCode and create three files named like index.html, app.js and style.css.

Our files are as follows 🔽

index.html

style.css

app.js

After we do all stuff, our application shown as below :

todo-list-app

Yeah, I can hear you say what a bad styling😏 I know that…

Let’s try to focus on our purpose of comparing VanillaJavascript and Vue.Js so now we will make an application with Vue.Js.

Initially, we need to add Vue.Js cdn(content distribution network) to make it usable for our project. How can we add Vue.Js cdn ?

• Go to Vue.Js official website and click to get started button then we need to scroll down and click the button called installation below Getting Started header section blablabla…, don’t worry… you don’t need to go to the site and click on it, I’ve already shared it below.

We will be able to use Vue.Js in our project after a single move, just copy the cdn and paste your index.html file and change your index.html and app.js files like below.

index.html

app.js

Look at this amazing code snippets, that’s the real power. Vue.JS allows us to keep our code as easy and simple as possible. Think about it, we have dozens of nested elements each one intertwined with each other and when we press the add button, we want to add theese elements in a list, if we would try to do this with JavaScript we need to create all elements and add some classes all of them. This process take lots of time and it costs an arm and a leg, this is just a simple example but in Vue.Js we don’t need to create nested elements written document.createElement(😃). This is horribly great. Nowadays the most important things is the time.Why waste time with the complex structure of Vanilla JavaScripts when we have a framework like Vue.Js that can be written quickly and has a high performance?

As a result, Vue saves us from complex JavaScript DOM(Document Object Model) operations. In addition to, Vue.Js reduces the deployment and development time. 🚀

I wish you good days with Vue.Js and thanks for reading. Please comment, if you have an any question or advice to me. See you next time. Happy Hacking 👋