Senhoras e senhores, vós lhes apresento o VUE.JS neste post escrito com bastante preguiça :o.

Introdução

O Vue.JS é uma biblioteca Javascript ( erroneamente chamado de Framework ) baseado na grande moda de ultimamente dos componentes reativos, utilizado para criar belíssimas interfaces web, as vezes chamadas de Single Page Application, logo podemos concluir que ele foi concebido com a ideia de ser simples, expansível e compacto, muitas vezes superando até mesmo o Angular ( um frameworkzinho famoso por ai 😛 ).

No decorrer desse post, pode ser que eu utilize o belíssimo Visual Code da microsoft, afinal de contas sou um programador Java que odeia Java e que ama as tecnologias da Microsoft, estranho não?, agora com certeza utilizarei o jsFiddle, então fique esperto.

Primeiros Passos com o Vue.JS

Como dito anteriormente, sou um programador Java, e para quem não é programador Java, digo-lhe que a premissa básica para quem está aprendendo algo novo relacionado a programação é “printar” na tela o famoso Hello World, até mesmo porque reza a lenda no mundo java de que, caso você não comece dessa maneira em Java, você será atropelado por 100mil elefantes brancos, então vamos printar Hello World com Vue.JS.

1 – Acesse o jsFiddle clicando aqui.

2 – Clique na opção Javascript, no terceiro quadrinho, e selecione o VUE.JS ( edge ) em FRAMEWORKS & EXTENSIONS.

3 – Mão na massa!

99.99% do VUE.JS trabalha com o conceito de Databaind ( Databind ), ou SEJE*, tudo quanto é variável existente em um determinado local, terá sua representação equivalente em outro local, exemplo:

Se no HTML tivermos um elemento com o seu ID setado com o valor de “meu_app”:

<elemento_qualquer id="meu_app"></elemento_qualquer>

e dentro tivermos uma varíavel BINDABLE

<elemento_qualquer id="meu_app">{{BINDABLE}}</elemento_qualquer>

nós teremos a sua equivalência no VUE.JS, algo como

new Vue({ el: '#meu_app ', data : {bindable : 'valor' } });

Ficou confuso ? – Vamos a prática!

Com o jsFiddle aberto, no quadrado indicado pelo título HTML digite o seguinte código:

<div id="meu_app">
    {{valor}}
</div>

Percebe que dentro da div com o seu ID devidamente setado, temos algo misterioso ali -> {{valor}}, está é a nossa variável que será substituída em algo momento \o/

Agora com o a nossa variável “bindada” já devidamente representada, vá até o quadrado no jsFiddle nome como JAVASCRIPT e digite o seguinte código:

new Vue ({
   el: '#meu_app',
   data: {
      Valor : 'Olá Mundo'
   }
});

Lembra que logo acima eu disse que tudo que existe em um mundo, tem de ter sua equivalência no outro mundo ? ( Tipo Stranger Fingers com Upside Down ), então aqui está a representação ao lado do JS, utilizando o objeto default do Vue JS ( new Vue ({}) ), seremos capazes de buscar um elemento¹, buscar suas variáveis² e setar um valor para a mesma³.

1 – A palavra reservada do objeto Vue “el” é utilizada para buscar um elemento dentro do HTML pelo ID, nesse caso ele busca ‘#meu_app’.

2 – A palavra reservada data é utilizada para trabalhar com os dados dos dois mundos.

3 – Dentro do objeto Vue – > Data -> podemos chamar as variáveis existentes no primeiro mundo ( HTML ), que nesse caso é a variável “valor” e logo em seguida atribuímos um valor a variável valor que nesse caso é o famoso “Hello World”.

Com os dois quadros devidamente preenchidos no jsFiddle, basta clicar em Run e ver o resultado 🙂