Tableless

Busca Menu

Conheça o Vue.js, um framework javascript para criação de componentes web reativos

Seja o primeiro a comentar por

Venho acompanhando a evolução de diversos frameworks “frontend” ao longo dos últimos anos, e sendo um entusiasta ao estudá-los e criar conteúdo sobre eles. Talvez o primeiro framework que tenhamos mais destaque (após a geração jQuery) foi 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 estes, temos o framework que iremos abordar neste artigo, o Vue.js (pronuncia-se view).

O Vue.js 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, events, criação de componentes, entre outros. Mas então, porque ter mais um framework com os mesmos processos? O resultado é a simplicidade que temos ao trabalhar com Vue.js, que veremos ao longo deste artigo.

Neste artigo usaremos o JSFiddle 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, escolha o framework Vue 1.0 para ser carregado:

JSFiddle+Vue

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 o Javascript:

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

Data Bind

O databind permite ligar um elemento do HTML à uma variável do JS. 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 este 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 a figura a seguir:

2016-06-28 14_43_35-Create a new fiddle - JSFiddle

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 este 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 esta ligada ao {{nome}} e também ao v-model do input. Quando alteramoso valor do input, a variável nome é alterada também, e a o nome aparece após o Hello World, conforme a figura a seguir:

2016-06-28 15_12_15-Create a new fiddle - JSFiddle

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 &lt;li&gt; repetindo este item para cada elemento do array. A resposta do código é exibida a seguir:

2016-06-28 15_20_33-Create a new fiddle - JSFiddle

Para saber mais

Demos um ponta pé inicial exibindo algumas funcionalidades deste framework, mas é claro ainda existe muitos outros pontos , e iremos a seguir exibir algumas urls para que você possa dar prosseguimento ao seus estudos. Fique a vontade também em perguntar.

Publicado no dia