Vue JS - Introducción y creando el primer proyecto

Nuevos frameworks y bibliotecas de JavaScript se lanzan todos los meses. Sin embargo, cuando miramos el Desarrollo Web, nos damos cuenta de que tres de ellos se destacan: Vue, Angular y React. Es muy probable que ya hayas oído hablar de alguno de ellos.

En este artículo, hablaremos específicamente sobre Vue JS, comentando cuál es su objetivo y también crearemos un primer ejemplo con esta tecnología. Lanzado en 2013 por Evan You, hoy es uno de los proyectos de código abierto más conocidos en el mundo del Desarrollo.

Objetivo y ventajas de Vue JS

Vue JS tiene el objetivo de ayudarnos a crear páginas Web, aumentando mucho nuestra productividad y permitiendo que realicemos tareas repetitivas en menos tiempo y con menos líneas de código.

Además, Vue JS es muy útil para ayudarnos a manipular la información de nuestra página. Dado que es un framework reactivo, Vue nos ofrece el recurso de crear atributos en su instancia y manipularlos en cualquier lugar de nuestra página HTML.

Siendo muy simple, Vue JS es considerado por muchos desarrolladores como el framework más fácil de aprender entre los tres principales que comentamos al inicio del artículo.

Incluso iniciar un proyecto Vue es muy simple, dado que se puede agregar a nuestro código HTML a través de una CDN. Muy práctico, ¿no crees?

¿Qué te parece si creamos un ejemplo usando Vue JS y así analizamos algunos de sus conceptos? ¡Entonces, vamos allá!

Primer proyecto con Vue JS

En este artículo crearemos un Sistema de Gestión de Usuarios usando Vue JS. Este proyecto contendrá un formulario de registro y una lista de usuarios. Su diseño inicial es el siguiente:

Al registrar un nuevo usuario, este deberá ser agregado a la lista de usuarios y tener la opción de poder ser excluido o modificado, de esta forma:

Imagina tener que hacer esto con Vanilla JS (JavaScript puro). Podría ser un gran trabajo, ¿no es así? Vamos a añadir Vue JS a esta aplicación y entender cómo puede ayudarnos.

Implementando Vue JS al proyecto

Un concepto inicial muy importante es el siguiente: para añadir Vue JS a nuestra aplicación, necesitamos crear una etiqueta principal, que será donde Vue podrá ejecutar sus funciones. Podemos decir que este elemento HTML será como los “límites de actuación” de Vue en nuestra página.

Así, vamos a añadir un

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