André Lug
Plataformas e frameworks de front-end são bem variados. Alguns são robustos, outros mais simples. Alguns tem uma curva de aprendizado mais complexa, outros são tão simples quanto usar jQuery. Vue.js se destaca nesse ambiente como uma solução de design minimalista e um foco na adaptabilidade. É possível criar um site inteiro com o Vue ou mesmo só um único componente e ele funcionará perfeitamente, o que também o faz ter uma curva de aprendizado bem tranquila para desenvolvedores web.
Nesse artigo vamos passar pelos principais componentes de Vue.js e como configurar uma aplicação simples utilizando esse framework que a cada dia cresce em popularidade. Contudo, para começar é interessante lembrar do por quê da escolha de um framework de front-end como o Vue na sua jornada como desenvolvedor.
IMPORTANTE! Esse post pode parecer confuso caso você não possua conhecimentos em HTML, CSS e JavaScript. Portanto, sugerimos a leitura para quem já conhece essas tecnologias. Boa leitura!
Por que usar o Vue.js?
As estruturas (frameworks) de front-end, assim como a maior parte das plataformas similares, se apresentam como abstrações para tarefas mais comuns. Vue.js, mais especificamente, existe para abstrair o processo de criar componentes em HTML que estão em constante atualização e modificação por meio de JavaScript.
Algumas das principais funcionalidades são:
- Criação de componentes HTML dinâmicos
- Ligar ações nos elementos HTML a dados, mantendo escopo e contextos
- Monitorar o HTML para renderizar novamente de forma automática quando necessário
Vamos a um exemplo rápido. Digamos que você tem uma lista de frutas. Seu código deve ser algo como:
HTML:
|
1 |
<ul id=”frutas”></ul> |
JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var lista = document.getElementById(“frutas”); var frutas = [“banana”, “maçã”, “pêra”, “morango”]; var html = “”; frutas.forEach(function(fruta) { html += “<li>” + fruta + “</li>”; }); lista.innerHTML = html; |
Quando criamos o HTML manualmente, como no exemplo acima, temos duas situações indesejadas.
1- O código fica difícil de ser administrado com o tempo.
2- Não há conexão entre os dados e o HTML gerado depois de sua execução.
Se a coleção de frutas muda ao adicionar, editar ou retirar um elemento, alguma conexão é necessária para poder ter um código que re-renderiza o HTML para que essas mudanças sejam mostradas no DOM. Nesse exemplo estamos falando apenas de mostrar dados dinamicamente, mas se quisermos ir além e adicionar eventos a cada um desses elementos, como fazer uma ação ao clicar no nome da fruta, a situação fica ainda mais complicada de se gerir. Teríamos algo assim:
JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var lista = document.getElementById(“frutas”); var frutas = [“banana”, “maçã”, “pêra”, “morango”]; var html = “”; frutas.forEach(function(fruta) { var item = document.createElement(“li”); item.innerHTML = fruta; item.onClick = function() { // executa uma ação } lista.appendChild(item); }); lista.innerHTML = html; |
Com o Vue.js separamos o HTML como um template que mostra o que criar baseado em dados e o framework renderizará automaticamente. O exemplo acima seria da seguinte maneira:
HTML:
|
1 2 3 4 5 6 7 8 9 |
<ul id=”frutas”> <li v-for=”fruta in frutas” v-on:click=”mostrarFruta(fruta)”> {{fruta}} </li> </ul> |
JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var frutas = new Vue({ el: “#frutas”, data: { frutas: [“banana”, “maçã”, “pêra”, “morango”] }, methods: { mostrarFruta: function mostrarFruta(fruta) { // executa uma ação } } }); |
No Vue.js temos uma separação total entre os aspectos HTML do código JavaScript e a lógica do JS, fazendo tudo ficar como um pacote fechado e organizado. Se por algum motivo precisarmos trocar a lista de frutas, o HTML será renderizado novamente de forma automática para refletir esses dados. Isso começa a ficar bem interessante quando puxamos esses dados não de uma lista fechada, mas sim de banco de dados.
Com isso já entramos um pouco em como o Vue.js funciona, mas o ponto aqui é que, assim como outros frameworks de front-end, o Vue nos ajuda a criar páginas que, além de ficarem organizadas ao longo do seu desenvolvimento e escala, também se adaptam automaticamente quando há necessidade.
DOM orientado a dados
Na base do Vue.je definimos a correlação entre o HTML e algum tipo de dado. Então toda vez que o dado é alterado o HTML também é atualizado. A forma como isso acontece é que quando iniciamos um componente com o Vue.js esse objeto é modificado e tem suas propriedades trocadas por métodos “getter” e “setter” rastreáveis. Isto é, o Vue analisa o objeto de dados enquanto constrói o HTML com os respectivos dados dentro e, então, monitora mudanças feitas nos dados e sabe exatamente o que e quando alterar algo no DOM.
A partir dessa relação precisa entre os dados e sua representação no HTML é possível criar aplicações front-end com muito mais velocidade e minimizar os erros. Algo que é bem interessante então é poder focar no desenvolvimento da lógica da aplicação sem se preocupar muito com como os dados irão ser atualizados no HTML.
Criando seu primeiro App no Vue.js
O primeiro passo para a instalação do Vue.js é adicionar seu código no <head> da aplicação.
HTML:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE HTML> <html> <head> <title>Primeiro app Vue.js</title> <script src="https://unpkg.com/vue"></script> </head> <body> </body> </html> |
Uma aplicação Vue.js é composta de um objeto de dados e um template HTML para se inserir os dados. Então, o próximo passo é adicionar um elemento para se tornar um componente do Vue.
HTML:
|
1 2 3 |
<div id="primeiroApp"> Contador: {{ contador }} </div> |
JavaScript:
|
1 2 3 4 5 6 7 8 9 10 |
var primeiroApp= new Vue({ el: '#primeiroApp', data: { contador: 0 } }); setInterval(function() { primeiroApp.contador += 1; }, 1000); |
Primeiro, definimos uma div para nosso template HTML do Vue.js. Dentro dele usamos duplas colchetes para interpolação de dados no HTML. Dentro já do app do Vue no JavaScript, nós simplesmente definimos os dados e o conectamos com a div para que lá ele renderize e use como template. Por fim, para incrementar um pouco as coisas, adicionamos um contador no app. Observe que o incremento do contador está apenas no JavaScript e ele automaticamente já atualiza no HTML.
Isso é tudo que precisamos para a criação de uma aplicação com Vue.js.
Eventos e métodos
Naturalmente, ter os elementos do DOM atualizados com base nos dados é só metade do que a maior parte das aplicações necessita. Ainda devemos considerar o lado inverso, em que os dados são atualizados com base em modificações no DOM e ações dos usuários. O Vue.js utiliza de eventos e métodos para esse tipo de situação. Métodos são funções armazenadas que rodam dentro do contexto do seu app.
Vamos atualizar o exemplo do contador e adicionar a habilidade de iniciar e parar o tempo ao invés de apenas deixá-lo rodando.
HTML:
|
1 2 3 4 5 6 7 |
<div id="primeiroApp"> Contador: {{ contador }} <button v-on:click="toggle">{{ acaoContador() }}</button> </div> |
JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
var primeiroApp= new Vue({ el: '#primeiroApp', data: { contador: 0, timer: null }, methods: { toggle: function toggle() { if (this.timer) { clearInterval(this.timer); this.timer = null; } else { this.timer = setInterval(function() { primeiroApp.contador += 1; }, 1000); } }, acaoContador: function acaoContador() { if (this.timer) { return 'parar'; } else { return 'começar'; } } } }); |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
#primeiroApp { display: inline-block; padding: 10px; font-size: 36px; font-family: 'Helvetica Neue', 'Open Sans', sans-serif; } #primeiroApp button { background: #4c82ff; border: 0; color: #FFF; font-size: 16px; margin-top: 6px; padding: 5px 10px; border-radius: 3px; display: block; width: 100%; } |
No template HTML, adicionamos um botão para começar e um para parar o contador. Para conseguir isso precisamos que o texto do botão seja dinâmico e que exista um gestor de eventos para quando o botão é clicado.
Como declarar um evento?
No Vue.js, para declarar um evento em um elemento, utilizamos o prefixo “v-on:” aos evento do DOM padrões. Alguns exemplos:
- ‘mouseover’ -> ‘v-on:mouser’
- ‘keyupevent’ -> ‘v-on:keyup’
- ‘click’ -> ‘v-on:click’
Algo que você pode ter notado é que, para o texto do botão, estamos chamando um método, ao contrário de o referenciar como uma propriedade armazenada. Em muitas situações, os dados que armazenamos não necessariamente estão no formato que desejamos mostrá-los na página. Métodos podem ser usados aqui para processar esses dados e mostrar da maneira correta; além de também ganharmos formas de relacionar esses dados automaticamente em suas atualizações.
Método ‘Toggle’
Na aplicação Vue.js temos agora uma nova propriedade que perpassa por alguns métodos e pela variável do contador. O método ‘toggle’, que está ligado ao evento de clique do botão, confere se a propriedade do contator está configurada, iniciando ou parando o contador respectivamente. Já o método ‘acaoContador’ é usado para mostrar a ação correta do botão, novamente baseado na variável do contador.
Uma vez que o método ‘toggle’ muda a propriedade do contador – e o método ‘acaoContador’, que também está no template do Vue.js, usa a propriedade do contador – toda vez que ele é chamado o template renderiza novamente o texto do botão.
É importante notar que mesmo quando não temos um valor inicial para a propriedade do contador, ela ainda precisa ser declarada ao criar a aplicação Vue.js. Se não declararmos a propriedade desde o início, ela não se comportará da maneira “reactive” – do Inglês, significando que ela não se atualizará de acordo com mudanças nos dados ou vice versa – e não atualizará o HTML.
No nosso exemplo, o HTML é atualizado uma vez a cada segundo enquanto o contador está rodando, então o método ‘acaoContador’ será chamado também quando o botão é recriado. O Vue.js nos possibilita otimizar isso utilizando cache nos resultados de um método e apenas chamando-o novamente quando um dado específico usado no método é alterado. Isso é bem útil se utilizar uma mesma propriedade já processada em vários lugares na página ao utilizar o valor do cache, ao invés de processar várias vezes o valor. Vale a pena aprofundar nesse aspecto posteriormente para otimizar a performance do app.
Conclusão
Após essa rápida demonstração do que o Vue.js é capaz, já é possível ter uma ideia de como utilizar em aplicações de vários tipos. Para quem está acostumado com jQuery é também uma forma de entender que a manipulação do DOM pode ser mais simples e automática.
Apesar de bem minimalista, o Vue.js é bastante poderoso e pode contribuir muito para a velocidade de implementação de novos projetos.
Se você se interessou e quiser saber mais sobre o tema, dê uma olhada nesse curso bem interessante sobre Vue.js. Tenho certeza que vai te ajudar muito!
