Nessa guerra de novos frameworks javaScript, Vue.js aparece como mais um player promissor, com a promessa de um framework versátil, testável e performático. Sua adoção vem crescendo dia-a-dia. Mas essa não é a principal killer point da plataforma. Ele promete ser um framework progressivo, não utilizar um único monolitico, as modulos podem ser adicionados de acordo com sua necessidade, ou seja, podemos partir de aplicações simples até complexas aplicações adicionando os módulos Vuex(redux) e Vue-router.
Uma grande diferença do Vue é sua organização os componentes agrupam HTML, CSS e JS em um mesmo arquivo, definido como separação por interesse.
Um outro ponto para muitos uma vantagem que o framework não tem nenhuma empresa proprietário, como React(Facebook) and Angular(Google). O Vue é 100% opensource.
Se você possui conhecimento básico em HTML, CSS e JS Vue é uma boa pedida, algumas empresas estão adotando a plataforma é aprender um novo framework antes do grande hype é um diferencial. Agora vamos ao que interessa, vou mostrar alguns recursos básicos do Vue.js.
Temos a opção de utilizar vue-cli, mas para esse exemplo vamos trabalhar com a CDN.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Adicionamos a Vue ao nosso HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Vue</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>Acabamos de criar o nosso primeiro app Vue.js, ele é bem simples mas já podemos ver algumas caracteristicas importantes. Dentro da div app temos um elemento com chave duplas esse é o padrão utilizado pelo Vue para indentificar as partes dinâmicas de nosso código, lembrando que esse trecho ficará conectado com nossa aplicação qualquer alteração desse valor será refletida em nosso DOM.
Após a chamada de nossa CDN temos o nosso código JavaScript, criamos um nova instância com os seguintes atributos, Qual elementos nossa aplicação irá apontar com “el”, qual os dados de nossa aplicação com “data” e assim nossa aplicação é inicializada.
Condicionais e loops
v-if
O atributo v-if é uma condicional “if” ela funciona como um toogle, se o nosso valor for true o conteúdo dentro da tag será exibido. Como podemos ver no exemplo acima, a variável ‘can_i_see_it’ e ‘can_i_see_it_2’ são vinculado a dois elementos só o primeiro span será exibido porque seu valor é true. Notem quando utilizamos um atributo vue não precisamos utilizar as chaves duplas.
v-else
Temos a possibilidade de trabalhar com else utilizando a propriedade v-else, se não atribuirmos nenhum valor a propriedade funciona como um else normal podemos trabalhar com uma situação “else if” passando uma outra condicional. outro detalhe para esse exemplo dentro de data eu passo um objeto “question” com dois atributos(title and are_you_ready). Por exemplo para acessa o atributo title dentro do objeto question utilizamos {{question.title}}.
Trabalhando com Inputs
No exemplo acima temos um input vinculado com uma propriedade message através do atributo v-model que cria uma conexão two-way data binding. Se testarmos o resultado a cada alteração do input será refletido na template tag {{message}}.
Para esse post temos nosso último exemplo:
Utilizamos o último exemplo e adicionamos um botão e vinculamos um método addMessage através to atributo v-on:click em nossa instancia Vue adicionamos um novo atributo methods e passamos os métodos que nossa aplicação irá possuir, nesse caso a cada click do botão salvar adicionamos o conteúdo do campo message a um array.
Com isso temos só um pouco que o framework pode fazer por nós, como nos exemplos acima não utilizei nenhum gerenciador de tarefas ou gerenciamento de bundle, mas podemos utilizar o vue-cli para ter um markup de uma aplicação.
A documentação do Vue é bem completa e está totalmente traduzida para português você pode conferir no link abaixo: