Vue.JS

Javascript?

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?

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 ?

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 👋

Front-End Developer