Uma abordagem inicial sobre a biblioteca VueJs
O que é VueJs?
VueJs (se pronuncia “view”) é um framework progressivo para criação de interfaces interativas na web. Um benefício bacana do Vue é a reatividade do data binding e a composição dos nossos componentes na camada da View de uma aplicação. Ou seja, o foco (não a única possibilidade que a ferramenta oferece) é na camada de exibição. O VueJs se integra facilmente com outras bibliotecas existentes no projeto, o que nos permite combinar bibliotecas de suporte para alimentar aplicações de página única (SPA)
Com o auxilio do vue-router (abordaremos esse tema em outro artigo) podemos utilizar o Vue para criação de projetos SPA.
Bom, vamos a um Hello World com esta ferramenta?
Bastou criarmos uma instancia do Vue e passar alguns parâmetros. Alguns pontos importantes sobre o que fizemos agora.
A instância do Vue tem suas configurações passadas através de um objeto. Informamos no mesmo uma propriedade el (elemento do documento HTML) com um valor #app apontando para a div cujo id é app,
A propriedade data armazena todas as variáveis da instância do Vue (nesse exemplo a variável message).
Diretivas
Diretivas basicamente são extensões da linguagem HTML que permitem a implementação de comportamentos.
Temos a diretiva v-model (implementação de comportamentos):
V-model — Usamos para modificar, acessar ou validar dados. Podemos então ligar o HTML aos dados carregados na memória e acessíveis via JavaScript. Essa técnica de automatizar o trafego de dados se chama, Two Way Data Binding.
Dessa forma o Vue pode observar uma variável a qualquer momento e alterar o seu valor, usando {{}} conseguimos referenciar uma variável do Vue diretamente no HTML.
Além da diretiva v-model, temos a v-for, v-on…
V-for — Utilizado quando é preciso repetir um elemento HTML “n” vezes iterando um objeto ou array javascript. Segue um exemplo prático.v-on podemos capturar os tipos de eventos e fazer operações com os mesmos.Bacana, falamos um pouco sobre algumas diretivas(isso porque existem várias), agora vamos partir para um conceito um pouco mais avançado .
Consumindo APIs com VueJs
Neste último exemplo do artigo utilizaremos o VueJs para consumir o conteúdo disponibilizado nessa API.
O fetch nos auxiliará no tratamento de requisições HTTP. Utilizaremos a sintaxe do ES6 tendo assim um código mais legível com o uso de arrow functions. Nesse último exemplo iremos utilizar o VueJs 2.x.
Primeiro , vamos a declaração no arquivo html.
agora no arquivo Js .
Primeiro, fizemos referencia utilizando o el e passando a identificação do elemento #app, após isso declaramos uma variável do tipo array dentro de data, onde tratamos nossas variáveis do objeto Vue.
Nas linhas seguintes temos a brincadeira de fato:
Usamos o mounted, que é uma função especial da versão 2.x para eventos, e declaramos dentro dela o método fetch passando como argumento a url onde esta a api. Após isso, o fetch vai dar uma resposta do tipo objeto (que é chamado response), retornando a informação da requisição em JSON, e posteriormente armazenando no nosso array people.
Então o resultado final da consulta vai ser uma lista de nomes devido a diretiva v-for ler o array de nomes e mostrar no HTML como uma lista.
Quando comecei a usar essa ferramenta, o que mais me chamou atenção foi a sua simplicidade em relação aos outros frameworks JS, como também o seu desempenho. Vale ressaltar que a comunidade brasileira tem abraçado essa biblioteca, sempre dando apoio aos novatos, facilitando assim a entrada deles no ecossistema.
Bom, esse foi meu primeiro artigo sobre VueJs, quem quiser fazer alguma crítica ou dar sua opinião sobre, estou disponível.
Até a próxima. :)
Referências :
Mentor: William
