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:
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
e o Javascript:
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
e JavaScript:
A configuração no fiddle fica semelhante a 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 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
e
Javascript
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:
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
e
Javascript
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
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.
- [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:
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
e o Javascript:
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
e JavaScript:
A configuração no fiddle fica semelhante a 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 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
e
Javascript
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:
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
e
Javascript
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
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.
*]2
-
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
