Vue JS - Introduction and creating first project

New JavaScript frameworks and libraries are released every month. However, when we look at Web Development, we see that three of them stand out: Vue, Angular, and React. It's very likely that you've heard of at least one of them.

In this article, we will specifically talk about Vue JS, discussing its purpose and also creating our first example with this technology. Launched in 2013 by Evan You, it is today one of the most well-known open-source projects in the Development world.

Purpose and advantages of Vue JS

Vue JS aims to help us create Web pages, significantly increasing our productivity and allowing us to perform repetitive tasks in less time and with fewer lines of code.

In addition, Vue JS is very useful for helping us manipulate the information on our page. Since it is a reactive framework, Vue allows us to create attributes in its instance and manipulate them anywhere in our HTML page.

Being very simple, Vue JS is considered by many developers to be the easiest framework to learn among the three main ones we mentioned at the beginning of the article.

Even starting a Vue project is very simple, as it can be added to our HTML code via a CDN. Quite practical, don't you think?

What do you think about creating an example using Vue JS and analyzing some of its concepts? Let's go!

First project with Vue JS

In this article, we will create a User Management system using Vue JS. This project will include a registration form and a listing of users. Its initial layout is as follows:

When registering a new user, they should be added to the user list and have the option to be deleted or edited, like this:

Our project rendering the registered users

Imagine having to do this with Vanilla JS (plain JavaScript). It could be quite a hassle, right? Let's add Vue JS to this application and understand how it can help us.

Implementing Vue JS into the project

A very important initial concept is the following: to add Vue JS to our application, we need to create a main tag, which will be where Vue can execute its functions. We can say that this HTML element will be like the “operational boundaries” of Vue on our page.

So, let's add a

to our HTML code, which will wrap all the other tags. It is necessary to define an id for this tag. In our case, we can set the id to “root”, like this:

<div id="root">
</div>

The next step is to add Vue to our code. We will do this through a CDN, using the