Iniciando com VueJS em Aplicações Monolíticas

Autores:

1.

Objetivo

Data de elaboração	Data: 05/08/22
Responsável pelo estudo	Igor Ramos de Oliveira (assessor)
Equipe do estudo	Esquadrão Suicida
Alvo	e-Estado / VueJs
Origem	Objetivo estratégico: Necessidade em melhorar frontend do e-Estado feito com javascript puro.
Objetivo	Agilizar a construção de interfaces web
Documentação correlata (opcional)
Observações	Não possui.

2.1. Introdução

A biblioteca VueJS disponibiliza uma serie de métodos de construção de interfaces para web de forma fácil e intuitiva e com suporte e praticamente todos os navegadores da atualidade.

3.2. Desenvolvimento

Ela pode ser instalada de varias formas, desde a criação de um projeto front-end completo utilizando node ate a simples importação da biblioteca de um CDN diretamente no html da página. Neste estudo abordaremos a utilização através da importação da biblioteca diretamente no arquivo HTML,  comumente utilizada em projetos web monolíticos em transição para uma arquitetura mais dividida (front-end/back-end)

3.2.1 Instalação

Adicione a importação da biblioteca na pagina que deseja criar

3.2.2 Estrutura inicial

3.2.3 Exibição condicional de elementos

O Vue nos permite de forma muito fácil exibir ou esconder elementos em tela através do uso de algumas 'diretivas' que ele nos oferece de forma nativa, uma das mais populares é o 'v-if', ela nos permite passar um valor booleano e caso verdadeiro (true) ele exibe os elementos HTML internos, basicamente um 'if' comum de qualquer linguagem de programação.

3.2.4 Percorrendo 'arrays' com v-for

A diretiva v-for no Vue nos permite percorrer arrays de dados e assim renderizar estes dados em qualquer estrutura HTML desejada. Neste exemplo percorremos uma lista de frutas utilizando a diretiva v-for e para cada item renderizamos uma tag <li>

3.2.4 Tonando a página iterativa

Aqui criamos dois métodos (handleIncrement e handleDecrement) na nossa instancia Vue, ambos alteram o estado da interface mudando o valor de 'contador' para +1 ou -1 do valor atual, estes métodos são vinculados aos botões em tela no evento de 'click', para isto basta criar uma propriedade na tag botão com @[nome-do-evento]="função", os eventos mais comuns são: 

1. @click=""
2. @change=""
3. @keydown=""

4.3. Conclusão

Como vimos, desenvolver interfaces iterativas se torna muito fácil quando utilizamos VueJs e a sua adição em projetos monolíticos que utilizam arquitetura MVC é extremamente simples, pois o mesmo pode ser implementado aos poucos (tela por tela) trazendo assim mais vida para estes sistemas.