Vue JS - Introdução e criando primeiro projeto

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 <div> ao nosso código HTML, que irá envolver todas as outras tags. É necessário definir um id para esta tag. No nosso caso, podemos informar o id “root”, desta forma:

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

O próximo passo é adicionar o Vue ao nosso código. Iremos fazer isso por meio de uma CDN, usando a tag <script>:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>

Com essa simples linha de código conseguimos implementar o script do Vue ao nosso projeto e já podemos ter acesso aos seus recursos.

Para iniciar o Vue, precisamos criar outra tag <script>, que estará abaixo desta primeira, e irá criar uma nova instância do objeto Vue, desta maneira:

<script>

	new Vue()

</script>

Isso nos leva para um próximo conceito importante: o Vue trabalha por meio de um objeto que iremos informar para sua instância. Esse objeto irá conter todas as opções necessárias para um bom funcionamento deste framework. Um primeiro parâmetro importante é o elemento HTML que será afetado pelas funcionalidades do Vue. Neste momento iremos informar o id da tag que criamos anteriormente para um parâmetro chamado “el”. O código ficará assim:

new Vue({
	el: '#root'
})

Note que informamos o id usando a # (hashtag), por meio dos seletores do CSS3.

Adicionando dados à página

Como já comentamos, o Vue nos ajuda a definir e manipular os dados de nossa página. Para isso, ele usa um outro atributo de sua instância. Estamos falando do parâmetro “data”, que irá armazenar nossos dados. Como estamos trabalhando com um Gerenciamento de Usuários, vamos criar um atributo chamado “users”, que possuirá seu valor inicial como um array vazio, desta forma:

new Vue({
	el: '#root',
	data: {
		users: []
	}
})

Com base nesse atributo vamos poder criar todas as funcionalidades de nossa página. Lembre-se também que o Vue é um framework reativo. Dessa forma, se alterarmos o valor desse atributo, essa mudança será refletida em todos os locais em que ele estiver definido em nossa página.

Vamos agora configurar a criação de um novo usuário por meio do formulário de cadastro. Para isso, vamos aprender mais dois conceitos fundamentais do Vue.

Diretivas

Diretivas é um recurso do Vue que nos permite mudar o comportamento padrão de um elemento HTML. Podemos dizer que por meio delas é possível adicionar as funcionalidades do Vue em tags específicas de nosso documento HTML.

Todas as diretivas possuem o prefixo “v-”, deixando claro que elas são recursos específicos do Vue. Com as diretivas podemos definir eventos, laços de repetição ou até mesmo o tão conhecido two-way data binding nos elementos. Vamos usá-las para definir o evento de “submit” em nosso formulário.

Para isso, usaremos a diretiva v-on, usada especificamente para eventos. Além disso, usaremos o modificador .prevent, que irá executar o método preventDefault(), desabilitando o comportamento padrão do navegador no evento de “submit”, que seria atualizar a página. Nosso código ficará assim:

<form v-on:submit.prevent>

Perceba que as diretivas são muito similares aos atributos do HTML, informadas na tag de abertura dos elementos.

Também precisamos armazenar o valor do nome do usuário que será criado por meio de nosso formulário. Para isso, iremos criar um outro atributo em nossa instância Vue. Podemos chamá-lo de “newUser” e definir que de início ele possuirá uma string vazia como valor, desta forma:

data: {
	users: [],
	newUser: ''
}

Agora precisamos resolver uma pequena questão: é necessário que o nome do usuário definido na tag <input> seja atribuído a esse novo atributo, para que possamos recuperar essa informação ao salvar os dados. Como podemos fazer isso? Precisaremos de um código bem complexo para isso. A boa notícia é que o Vue já nos oferece essa funcionalidade, por meio de uma diretiva, chamada v-model. Ela é a responsável por definir o two-way data binding nos elementos HTML. É usada principalmente nos elementos de formulário.

Vamos defini-la em nossa tag <input>, informando o atributo “newUser” como seu valor:

<input type="text" v-model="newUser">

O próximo passo é configurar de fato a função que será executada ao submetermos o formulário. Isso nos leva para o próximo conceito do Vue.

Métodos

As funções que criamos dentro da instância Vue são chamadas de métodos. Eles são responsáveis por executar qualquer tipo de ação dentro de nossa aplicação, como submeter um formulário, que é o caso do nosso projeto atual. Para criar um método, precisamos informá-lo dentro do parâmetro methods na instância Vue. Vamos criar um método chamado addUser(), que será quem executaremos ao enviar o formulário:

new Vue({
	el: '#root',
	data: {
		users: [],
		newUser: ''
	},
	methods: {
		addUser: function() {
	
		}
	}
})

Note que o parâmetro methods fica no mesmo nível que o parâmetro data. Nunca devemos informar um dentro do outro, pois nosso código não irá funcionar neste caso.

Agora que criamos o método, precisamos chamá-lo em nossa tag de formulário, junto com a diretiva v-on. Essa parte de nosso código ficará assim:

<form v-on:submit.prevent="addUser">

Excelente. Contudo, precisamos definir o que nosso método irá de fato executar, pois até o momento ele está vazio. Como estamos trabalhando com um array de usuários, vamos executar o método push() em nosso atributo users, informando os novos dados do usuário. Para chamar um atributo dentro da instância Vue, podemos usar o this. Assim, nosso método ficará assim:

methods: {
	addUser: function() {
		this.users.push({
			id: (this.users.length + 1),
			name: this.newUser
		})
	}
}

Explicando: nós informamos para o nosso array de usuários um novo objeto, que irá conter o id e o nome do usuário. Para o nome, nós chamamos o atributo “newUser”, que terá seu valor definido pela tag <input>. E definimos o valor do id do usuário como a quantidade de usuários somando um. Dessa forma, o id será numérico e será incrementado automaticamente, conforme criarmos novos usuários.

Para testar se nosso código está funcionando até aqui, vamos adicionar um console.log() nesse método:

console.log(this.users);

Vamos testar o cadastro de nosso primeiro usuário:

Ao clicar no botão “Cadastrar”, vemos o seguinte resultado no console:

Percebemos que as informações do usuário foram corretamente adicionadas à nossa instância Vue, o que é excelente! Contudo, as informações desse novo usuário ainda não estão sendo listadas na página. Vamos implementar essa funcionalidade agora.

Listando os usuários cadastrados

Para listar os usuários, vamos precisar realizar um laço de repetição no array de nossa instância Vue. Nós também possuímos uma diretiva que nos ajuda a realizar isso: a diretiva v-for.

Ela espera como valor a variável onde irá executar o for e também o nome que essa variável irá usar em cada repetição. Iremos adicionar essa diretiva na tag <li>. Nosso código HTML ficará assim:

<li v-for="user in users">

</li>

Perceba que informamos a variável “users”, no plural, que é o atributo que criamos em nossa instância Vue, e definimos que em cada repetição usaremos a variável “user”, no singular.

Dentro desta tag <li> iremos definir um novo elemento <input>, que conterá o valor do nome de cada usuário. Essa informação está contida na variável user.name e iremos defini-la no atributo value da tag de formulário. Contudo, um atributo HTML por padrão não consegue interpretar o valor de uma variável, mas apenas strings. Para resolver essa questão, usaremos a diretiva v-bind. Ela possui o objetivo de definir o valor de variáveis aos atributos HTML. Nossa tag <input> ficará assim:

<input type="text" v-bind:value="user.name">

Aproveitando que estamos falando da diretiva v-bind, vamos usá-la também na tag <li>. Faremos isso pois é uma boa prática definir o atributo key nas tags que realizarmos laços de repetição. A documentação do Vue nos sugere sempre fazer isso. No caso, vamos definir como key de cada tag de lista o valor da variável user.id:

<li v-for="user in users" v-bind:key="user.id">

Se desejar, poderá usar a forma abreviada da diretiva v-bind, que envolve informar apenas os dois-pontos, ou seja, :key.

Agora, se executarmos mais um teste em nosso projeto, veremos o seguinte resultado:

Agora nosso usuário cadastrado foi corretamente adicionado à nossa tag de lista. Apenas um detalhe importante: isso tudo foi feito sem precisar recarregar a página, ou realizar uma requisição externa. O Vue JS fez isso para nós de forma automática, através de sua reatividade.

A próxima função que iremos implementar é a de editar um usuário.

Editando um usuário

Para realizar a edição dos dados de um usuário, iremos executar um novo método, chamado setUser(), no momento em que mudarmos o valor da tag <input>. Ou seja, não será necessário nem mesmo clicar em algum botão, mas apenas mudar o valor dessa informação e clicar fora do elemento. Incrível, não é mesmo?

Para isso, vamos precisar manipular o evento “change” da tag <input>. Vamos fazer uso novamente da diretiva v-on, desta forma:

<input type="text" v-bind:value="user.name" v-on:change="setUser($event.target.value, user.id)">

Note que informamos dois parâmetros para o método setUser(). 1) Informamos uma variável chamada $event.target.value. Essa variável contém o valor do próprio elemento de formulário, ou seja, o novo valor definido no momento da alteração. 2) Informamos a variável user.id, que nos ajudará no momento de encontrar o usuário correto para realizar a alteração.

Precisamos agora de fato criar o método setUser() na instância Vue. Esse método conterá a seguinte estrutura:

setUser(newName, id) {

	this.users.map(user => {

		if (user.id == id) {
			user[name] = newName;
		}

	});

}

Explicando: esse método irá executar o método map() em nosso array de usuários, aplicando uma função em todos os itens dele. Nós fazemos uma verificação dentro desta função, perguntando por meio de um if() se o usuário do array possui o mesmo id que informamos para o método setUser(). Se essa condição for atendida, nós alteramos a informação de nome daquele usuário pelo novo nome informado para o método. Note que este método foi criado puramente em JavaScript, usando outro método de arrays. Além disso, perceba que, como esse método é uma função, nós criamos seu nome e já informamos os parênteses da função, sem precisar informar a palavra reservada function.

Neste momento, se alterarmos o nome do usuário no elemento HTML, este valor será alterado não apenas em nossa página, mas também no atributo da instância Vue. Isso irá nos ajudar muito quando conectarmos essa aplicação com uma API, por exemplo.

Por fim, precisamos criar o método que irá realizar a exclusão de um usuário.

Excluindo um usuário

O método de exclusão de um usuário se chamará removeUser(). Ele esperará como parâmetro o id do usuário a ser excluído. Vamos realizar a chamada deste método na tag do botão de excluir. Ele será executado ao clicar no botão. O código ficará assim:

<button class="user-delete" v-on:click="removeUser(user.id)">Excluir</button>

Mais uma vez fizemos uso da diretiva v-on. Se desejar, poderá usar a forma abreviada desta diretiva, que é representada pelo @, ou seja, @click. Já estamos ficando craques em usar diretivas ?.

Vamos agora criar o método em nossa instância Vue. Ele ficará assim:

removeUser(id) {
	this.users = this.users.filter(user => {
		return (user.id != id);
	})
}

Explicando: fizemos uso de mais um método para arrays. Usamos o método filter(), que retorna todos os itens do array que satisfazem uma condição específica. Nós definimos que serão retornados apenas os itens que possuírem o id diferente do informado pelo método, o que irá de fato excluir o usuário que possuir o id passado como parâmetro.

Os métodos de arrays são realmente muito interessantes e podem nos ajudar em algumas outras situações específicas, mas podemos falar mais sobre isso em um outro artigo, voltado apenas para eles.

Neste momento, se criarmos mais de um usuário em nossa página, eles serão listados corretamente:

Contudo, se clicarmos no botão excluir, o usuário será removido automaticamente da página:

Com isso chegamos ao fim de nosso primeiro CRUD usando Vue. Se desejar, poderá conferir o código completo deste projeto em nosso GitHub.

O Vue JS é de fato um framework muito simples de aprender, mas não deixa de ser muito poderoso ao mesmo tempo. Além disso, ele sempre está recebendo atualizações e melhorias. Por exemplo, falamos há pouco tempo sobre as novidades da recém-lançada versão 3 do Vue. Você pode conferir este artigo clicando aqui.

Também, se desejar conhecer todos os recursos do Vue, poderá acessar nosso Curso Completo de Vue JS, onde abordamos todos os conceitos deste framework em mais de 135 aulas e com um material de apoio para cada conceito.

A gente se vê no próximo artigo, até lá :)