Criando um site com Node.js – parte 2
4 de maio de 2017
O que é TypeScript
27 de maio de 2017

Conheça o framework Vue.js

vue

Um amigo meu me disse certa vez que a cada espirro de alguém, nasce um novo framework javascript. Não tem como negar essa lógica, pois são inúmeros frameworks que encontro por aí, alguns com novidades muito bacanas, outros nem tanto.

Uma surpresa agradável foi o framework javascript Vue.js. Super leve, não deixa nada a desejar de poderosos frameworks como Angular e Reacty. Ouso ainda dizer que ele tem aspectos muito semelhantes a esses dois camaradas que estão entre os mais queridos dos desenvolvedores frontend.

Pegando o gancho da vuejs-brasil, o Vue.JS, VueJS ou simplesmente Vue é uma biblioteca (lib) javascript para o desenvolvimento de componentes reativos para interfaces web modernas (Reactive Components for Modern Web Interfaces). 

Vale a pena estudar este cara? O que tenho estudado e visto me diz que sim, com certeza vale a pena. Quer ser convencido? Não é o objetivo deste artigo, mas deixo um ótimo material para você ler e tirar suas próprias conclusões.

Porque vue.js é uma boa opção

Como instalar

Para utilizar o vue.js em seu projeto, basta acrescentar a linha abaixo em sua página.

<script src=“https://unpkg.com/vue”></script>
 
Sim, isto é tudo que é necessário para utilizar o vue.js em seu projeto. Você pode também instalar o vue.js pelo npm (npm install vue) ou pelo bower (bower install vue), apenas chamando o arquivo depois de instaladdo.

Primeiro Hello World

A galera que me acompanha sabe que acho tutoriais de Hello World um desperdício de tempo. Então, veremos esse famoso Hello World e mais alguma coisa, para que este artigo seja, pelo menos, útil.
 
Utilizaremos o Data Bind. A galera do Tableless definiu o Data Bind assim: o “Data Bind 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”.
 
Deixo a dica do artigo deles sobre o vue:
Para printar (imprimir) o hello world em sua página, basta crir uma div com id=”app” e instanciar um novo objeto Vue, seguindo o modelo abaixo:
 
<div id=“app”>
   {{ message }}
</div>
 
var app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue!’
   }
})

Trabalhando atributos de tags HTML

Com o Vue.js podemos modificar os atributos das tags HTML, como por exemplo, a tag title:
 
<div id=“app-2”>
  <span v-bind:title=“message”>
     Hover your mouse over me for a few seconds
     to see my dynamically bound title!
  </span>
</div>
 
var app2 = new Vue({
el: ‘#app-2’,
data: {
  message: ‘You loaded this page on ‘ + new Date()
   }
})

Arrays

É possível também trabalhar com loops e arrays de maneira bem simples e eficiente:

<div id=“app-4”>
  <ol>
    <li v-for=“todo in todos”>
      {{ todo.text }}
    </li>
  </ol>
</div>
 
var app4 = new Vue({
   el: ‘#app-4’,
   data: {
     todos: [
       { text: ‘Learn JavaScript’ },
       { text: ‘Learn Vue’ },
       { text: ‘Build something awesome’ }
     ]
   }
})
 
Se você tem interesse, a documentação do vue.js está repleta de exemplos fantásticos que podemos utilizar em nossas aplicações. A galera do Vuejs Brasil também tem muito material bacana sobre o framework.

Depois que terminarmos a série Como criar um site com Node.js, pretendo usar o portal de notícias que desenvolveremos e trabalhar com ele os recursos de Vue.js.

E ai, o que acharam deste camarada? Deixe suas impressões nos comentários!!!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *