Venho acompanhando a evolução de diversos frameworks “frontend” ao longo dos últimos anos, e sou um entusiasta ao estudá-los e criar conteúdo sobre eles. Talvez o primeiro framework com mais destaque (após a geração jQuery) tenha sido o AngularJS, que está forte até hoje, mas já possui o seu sucessor, o Angular 2 (atualmente na versão beta). Também temos o React e o Aurelia nesse jogo e, além de todos eles, temos o framework que iremos abordar neste artigo, o Vue.js (pronuncia-se view).

O Vue destaca-se pela sua simplicidade em executar as mesmas tarefas dos outros frameworks. Nele, você possui os mesmos conceitos que um framework reativo possui, como data bind, two way, eventos, criação de componentes, entre outros. Mas, então, por que ter mais um framework com os mesmos processos? O resultado é a simplicidade que temos ao trabalhar com Vue, que veremos ao longo deste artigo.

Neste artigo, usaremos https://jsfiddle.net/ como ferramenta para compreender os processos básicos do Vue, então não será necessário, a princípio, instalar nada no seu sistema. Abra o jsfiddle em outra aba do seu navegador e acesse o menu javascript, conforme a imagem a seguir, e escolha o framework Vue 1.0 para ser carregado:

Estrutura inicial

Pelo jsfiddle, o Vue pode ser usado usando as áreas HTML e JavaScript. Na parte JavaScript, o código básico para utilizar o Vue é instanciar a própria classe Vue, repassando inicialmente o parâmetro el, que determina em qual elemento html o Vue irá observar.

Basicamente, temos:

HTML

<div id="app">

</div>

e

JavaScript

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

Databind

O databind permite ligar um elemento do HTML à uma variável do JavaScript. Neste ponto, para atualizar a variável na página, não é necessário percorrer a DOM do elemento HTML e alterar o seu valor. Basta alterar o valor da variável javascript que o Vue irá cuidar da atualização no elemento html. Chamamos esse comportamento de design reativo, ou seja, o design da página reflete a configuração das variáveis.

Vamos então criar um pequeno Hello World, veja:

HTML

<div id="app">
 {{msg}}
</div>

e

JavaScript

new Vue({
  el: '#app',
  data: {
    msg: 'Hello World!'
  }
})

A configuração no fiddle fica semelhante à figura a seguir:

Clique no botão Run para executar o código. A resposta é exibida na caixa da direta. Neste caso, a mensagem Hello World será exibida.

Two-Way databing

O termo Two Way significa que uma variável pode estar ligada a um elemento, e esse elemento pode alterar a variável, como uma via dupla. No próximo exemplo, vamos criar uma caixa de texto onde você poderá digitar o seu nome, veja:

HTML

<div id="app">
 {{msg}}, {{nome}}
  <br/>
  <input type="text" v-model="nome">
</div>

e

JavaScript

new Vue({
  el: '#app',
  data: {
    msg: 'Hello World',
    nome: 'Fulano'
  }
})

O que temos agora é uma nova variável chamada “nome”, que está ligada ao {{nome}} e também ao v-model do input. Quando alteramos o valor do input, a variável nome é alterada também, e a do nome aparece após o Hello World, conforme a figura a seguir:

Criando uma lista

É possível iterar entre elementos de um Array no JavaScript e criar uma lista de elementos em HTML, conforme o exemplo a seguir:

HTML

<div id="app">
  <ul>
    <li v-for="fruit in fruits">
      {{ fruit.name }}
    </li>
  </ul>
</div>

e

JavaScript

new Vue({
  el: '#app',
  data: {
    fruits: [
      { name: 'banana' },
      { name: 'apple' },
      { name: 'orange' }
    ]
  }
})

Neste exemplo, a variável `fruits` é um array de objetos, que contém a propriedade `name`. No HTML, usamos o elemento `v-for` para realizar um loop no `<li>` repetindo esse item para cada elemento do array. A resposta do código é exibida a seguir:

Para saber mais

Demos um pontapé inicial exibindo algumas funcionalidades desse framework, mas é claro ainda existem muitos outros pontos e iremos a seguir exibir algumas URLs para que você possa dar prosseguimento ao seus estudos. Fique à vontade também para perguntar.

• Guia oficial em inglês
• Guia traduzido para o português
• 1º hangout sobre Vue e Vuex
• www.vuejs-brasil.com.br – Blog sobre Vue com conteúdo em português
• vuejs-brasil.slack.com – Comunidade Vue Brasil no Slack
• telegram.me/vuejsbrasil – Comunidade Vue Brasil no Telegram
• telegram.me/danielschmitz– Converse diretamente comigo pelo Telegram