Vue.js — De amante casual pra uma relação estável.
Olá meus caros amigos Devs, hoje venho falar um pouco de uma lib JS que vem ganhando espaço na comunidade de desenvolvedores web, pois bem, venho falar do Vue.js (se pronuncia View), o que falar dessa belezura que conheço a tão pouco tempo e já considero pacas?
Bem vamos explorar um pouco sobre ela nesse post que na verdade dá início a uma série de posts na qual vou desenvolver uma aplicação usando Vue.js em diferentes contextos (Vue com jQuery, Vue.js + Vue-resource), também abordarei o Browserify na parte de componentização e como gerar a build final pra produção usando o Gulp.js, também tentarei abordar uma aplicação de forma mais modular e elaborado usando o vue-cli que facilitará nosso trabalho com componentização e testes, então fique atento aos próximos posts.
Eu descobri o Vue.js quando procurava uma alternativa ao Angular pra lidar com a parte visual dos meus componentes interativos mas que fosse leve o bastante pra facilitar a implementação combinando-os com as Views dos frameworks backend, então descobri Vue.js num vídeo do Fábio Vedovelli no Youtube sobre Laravel com Vue.js e acabei me interessando, usando e me apaixonando.
O que é?
Vue.js assim como o React é uma biblioteca Javascript que tem o propósito de facilitar a construção de interfaces web interativas. O objetivo da Vue.js é proporcionar as vantagens do Reactive Data Binding combinado a componentes visuais com uma API que seja simples.
Vue.js por si só não se considera um framework completo como o Angular.js ou Ember por exemplo, devido a isso é bastante fácil combinar componentes do Vue com componentes de outras bibliotecas (como jQuery) caso esteja lidando com um projeto legado já em andamento. Porém quando Vue.js é combinado com outros módulos próprios ele ganha ainda mais poder e consegue implementar uma Single Page App perfeitamente usando usando somente seus recursos.
Mais detalhes do Vue.js podem ser visualizados e explorados da página oficial da lib https://vuejs.org/, em Overview você conseguirá entender bem o propósito .
Comparação
Se comparado a outros frameworks, Vue compartilha algumas características com o React (do Facebook) sobretudo pelo fato componentes visuais reativos e combináveis, ao contrário de Angular.js que trabalha com o conceito de escopos, mas Vue.js também possui algumas características que lembram o jeito Angular de fazer as coisas principalmente na questão do .
Hello World
Chega de papo e vamos ao que interessa, código, vamos iniciar nossa primeira aplicação que será uma calculadora de IMC (Índice de Massa Corpórea), um projeto bem simples mas que vamos conseguir abstrair diversas características da lib.
Bora mãos a obra, vamos usar o NPM do Node.js para gerenciar as dependências da nossa aplicação então na pasta do app vamos startar nosso package.json usando o comando npm init:
vue-imc$ npm init
name: (vue-apps) vue-imc
version: (1.0.0)
description: calculador de imc usando Vue.js
entry point: (index.js) app.js
test command:
git repository: git@github.com:wesleysaraujo/vue-imc.git
keywords:
author:
license: (ISC)
Feito isso já teremos nosso packge.json gerado e podemos solicitar a instalação das nossas dependências, inicialmente iremos usar o Bootstrap, Font-Awesome e Vue.js somente:
Uma vez tendo nossas dependências já instaladas vamos criar nosso index.html que ficará +- assim:
Para facilitar a visualização do nosso app vamos usar o http-server um simples servidor HTTP que dispensa qualquer tipo de configuração, basta instala-lo usando o comando npm install -g http-server e na hora de testar a aplicação, no diretório raiz use o comando http-server, após isso é só acessar no seu browser 127.0.0.1:8080. Para facilitar a vida você pode clonar o esquelo com essa estrutura já criada usando:
git clone -b starter git@github.com:wesleysaraujo/vue-imc.git
Depois mude para o seu branch master pra continuar com o desenvolvimento do projeto e salvar no seu repositório do Github.
Bora lá ao nosso app.js, vamos começar instanciando o vue.js, isso é bem simples:
O objeto Vue possui algumas propriedades:
* el — é onde declaremos qual elemento do HTML faz responde pela aplicação, isso é equivalente ao ng-app do Angular, com a diferença que no nosso html só precisamos mesmo declarar o id do elemento.
* data — Data é parte integrante do nosso reactive data binding, tudo que está em data pode ser renderizado no html usando {{ resultado }} e também dentro das propriedades declarativas do Vue como v-repeat no caso de ser necessário renderizar uma listagem de objetos.
Nosso HTML após declaração da aplicação Vue ficará assim:
Agora vamos brincar um pouco com outras propriedades do Vue.js para fazer nossa calculadora funcionar e exibir o resultado. O calculo do IMC (índice de massa corporal) consiste na formula: Peso(em kg) / (Altura (em cm))² . Para que o Vue consiga lidar com os values dos campos inputs é preciso declara-los como models, para isso usamos o atributo v-model no campo input:
Note que os valores dos nossos 2 models estão no formato de objetos imc, fiz isso para facilitar a manipulação desses dados de forma aninhada, pois no v-on:evento=”método” que é o atributo na qual nos permite passar eventos (click, dblclick, blur, focus…) eu chamo o método calculoImc() passando como parametro o model imc (que contem peso e altura do usuário). Para testar a saída dos valores inputados você pode chamar o model imc colocando {{ imc | json}} no seu HTML. Antes de prosseguir faça uma ajuste nos seus inputs alterando de type=”text” para type=”number”, uma vez que só será permitido números. Além do imc também passo o $event, pois uso ele no event.preventDefualt(), já que nem todos os navegadores interpretam o event automaticamente.
Uma vez com o HTML pronto precisamos criar nosso método calculaImc() no nosso app.js, dessa vez vamos usar a propieade methods do Vue.js é em methods que lidamos com toda parte lógica da aplicação, é uma espécie de controller. Veja abaixo como deve ficar nosso :
Observe que usamos a função Math.pow(imc.altura, 2) esse função retorna a base elevada a potencia do expoente, e multiplicamos por 10000 para corrigir as casa decimais. Observe que para atribuir o calculo ao objeto resultado (de data:) usamos o this, isso permite que consiga setar um novo valor pra ele, esse valor é ele mesmo concatenado com a variável calculo.toFixed(2), pois do calculo quero somente 2 casas decimais.
Simples né, bora lá testar: 127.0.0.1:8080
Viu só, simples né?! esse post é só uma introdução do Vue.js, nos próximos irei abordar outras funcionalidades dessa biblioteca incrível, aos poucos vamos avançando com nossa aplicação, como por exemplo identificar em qual categoria de peso o usuário se enquadra e mostrar a cor do alert de acordo com a categoria, mas isso será no próximo post, espero que tenham gostado e até o próximo.
