Novos frameworks e bibliotecas JavaScript são lançados todos os meses. Contudo, quando olhamos para o Desenvolvimento Web, percebemos que três deles se destacam: Vue, Angular e React. É bem provável que você já ouviu falar de algum deles.
Neste artigo, iremos falar especificamente sobre o Vue JS, falando sobre qual é o seu objetivo e também criaremos um primeiro exemplo com esta tecnologia. Lançado em 2013 por Evan You, ele é hoje um dos projetos de código aberto mais conhecidos no mundo do Desenvolvimento.
Objetivo e vantagens do Vue JS
O Vue JS tem o objetivo de nos ajudar na criação de páginas Web, aumentando muito nossa produtividade e permitindo que realizemos tarefas repetitivas em menos tempo e com menos linhas de código.
Além disso, o Vue JS é muito útil para nos ajudar a manipular as informações de nossa página. Visto que é um framework reativo, o Vue nos oferece o recurso de criar atributos em sua instância e manipulá-los em qualquer local de nossa página HTML.
Sendo muito simples, o Vue JS é considerado por muitos desenvolvedores o framework mais fácil de aprender dentre os três principais que comentamos no início do artigo.
Até mesmo iniciar um projeto Vue é muito simples, visto que ele pode ser adicionado ao nosso código HTML através de uma CDN. Bem prático, não concorda?
O que acha de criarmos um exemplo usando o Vue JS e assim analisar alguns de seus conceitos? Então, vamos lá!
Primeiro projeto com Vue JS
Neste artigo iremos criar um Gerenciamento de Usuários usando o Vue JS. Este projeto irá conter um formulário de cadastro e uma listagem dos usuários. Seu layout inicial é o seguinte:
Ao cadastrar um novo usuário, ele deverá ser adicionado à lista de usuários e possuir a opção de poder ser excluído ou alterado, desta forma:
Imagine ter que fazer isso com Vanilla JS (JavaScript puro). Poderia dar um trabalhão, não é mesmo? Vamos adicionar o Vue JS a esta aplicação e entender como ele pode nos ajudar.
Implementando o Vue JS ao projeto
Um conceito inicial muito importante é o seguinte: para adicionar o Vue JS à nossa aplicação, precisamos criar uma tag principal, que será onde o Vue poderá executar suas funções. Podemos dizer que esse elemento HTML será como os “limites de atuação” do Vue em nossa página.
Assim, vamos adicionar uma O próximo passo é adicionar o Vue ao nosso código. Iremos fazer isso por meio de uma CDN, usando a tag <div id="root">
</div>