Fala Galera,
Eu estive ausente nestes últimos dois meses por motivos profissionais porém estou voltando a fazer o que eu mais gosto, escrever artigos e compartilhar conhecimento com vocês que me seguem. Por isso deixo meu muito obrigado a todos. Neste artigo de volta, iremos falar sobre uma biblioteca que realmente está dando o que falar e está crescendo muito entre os desenvolvedores, o VueJs.
O VueJs foi criado por Evan You e conta com uma comunidade ativa. O VueJs é um framework progressivo que ajuda os desenvolvedores a construir interfaces. o VueJs foi projetado para ser usado de forma incremental. A sua camada principal é focada para a visualização sendo assim muito fácil integrar outras biblioteca ou projetos existentes. Mas não se engane pensando que o VueJs é uma simples biblioteca e não é capaz de lidar com aplicações complexa. Com seu ecossistema o VueJs é a solução perfeita para criar soluções sofisticadas que todo sistema complexo em Single-Page Applications exige
Primeiros Passos
Para seu usar o VueJs podemos utilizar o Vue Cli e assim criar todo estrutura do projeto baseado em VueJS. No meu próximo artigo estarei detalhando o funcionamento do Vue Cli e como essa ferramenta torna nosso trabalho simplificado. A forma mais simples para usar o VueJS é criar uma página HTML. Neste exemplo iremos criar uma pagina simples chamada Index.html e iremos importar a biblioteca do VueJS conforme exemplo abaixo
<html> <head> <title>Minha primeira aplicação em VueJs</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body></body> </html>
Renderização em Templates
O kernel do VueJS existe um conjunto de ferramentas que nos permite renderizar dados no DOM (Document Object Model) utilizando uma sintaxe de template simples porém poderosa. Veja no exemplo abaixo:
<html> <head> <title>Minha primeira aplicação em VueJs</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> </body> <script> new Vue({ el: "#app", data: { message: "Olá Vue!" } }); </script> </html>
Acabamos de criar nossa primeira aplicação em VueJs, com essa sintaxe simples de template podemos criar poderosos aplicativos em Single-Page Applications. A primeira vista o sistema de templates parece simples porém mais a frente iremos ver o seu sistema de condicionais e loops que fazem o VueJS ser incrivelmente simples e poderoso.
Diretivas – Condicionais e Loops
O kernel do VueJs contém diversas diretivas built-in para nos ajudar no desenvolvimento de nossas aplicações. Essas diretivas controla o comportamento dos elementos no DOM.
Vejamos alguns exemplos
<html> <head> <title>Minha primeira aplicação em VueJs</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p v-if="showMessage">{{ message }}</p> </div> </body> <script> new Vue({ el: "#app", data: { message: "Olá Vue!", showMessage: true } }); </script> </html>
No exemplo acima estamos utilizando a diretiva v-if, ela controla a forma de exibição de nossa mensagem. No próximo exemplo iremos trabalhar com a diretiva v-for. Essa diretiva tem como propósito fazer uma estrutura de repetição. Podemos utilizar essa diretiva com um array e assim exibir o seus itens. Veja o exemplo abaixo.
<html> <head> <title>Minha primeira aplicação em VueJs</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <ol> <li v-for="item in itens"> {{ item.text }} </li> </ol> </div> </body> <script> new Vue({ el: "#app", data: { itens: [ { text: 'Aprender JavaScript' }, { text: 'Vue é incrível' }, { text: 'Vamos aprender Vue?' } ] } }); </script> </html>
Interagindo com o usuário
Podemos utilizar o VueJs e o seu sistema de event listerners para interagir com os usuários isso tudo de forma simplificada com o seu modelo de Two-Way Data Binding
Para escutar um evento de click de um botão por exemplo iremos utilizar a diretiva v-on. Veja no exemplo abaixo:
<html> <head> <title>Minha primeira aplicação em VueJs</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <button v-on:click="criarMessage">Clique e veja uma nova mensagem</button> </div> </body> <script> new Vue({ el: "#app", data: { message: "Olá Vue!" }, methods: { criarMessage: function() { this.message = `Olá Vue, você clicou no botão em ${new Date()}`; } } }); </script> </html>
Neste exemplo podemos observar que ao atualizarmos a variável “message” automaticamente a nossa página é atualizada. Isso porque as manipulações e mudança de página são tratadas pelo VueJS, o código que você escreve é focado na lógica de manipulação de dados.
Utilizamos a diretiva v-model para interligarmos nossos dados a nossa página. Veja como é simples interligar uma caixa de texto e um modelo de dados.
<html> <head> <title>Minha primeira aplicação em VueJs</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <input v-model="messageNew" /> <button v-on:click="criarMessage">Clique Aqui</button> </div> </body> <script> new Vue({ el: "#app", data: { message: "Olá Vue", messageNew: "" }, methods: { criarMessage: function() { this.message = this.messageNew; } } }); </script> </html>
Neste artigo mostrei brevemente os recursos mais básicos do VueJs. O VueJs é um ecossistema poderoso porém simples de ser utilizado. Ele permite que possamos criar aplicativos poderosos utilizando o seu modelo de Two-Way Data Binding.
No próximo artigo estarei detalhando como podemos utilizar o Vue Cli e o que essa fantástica ferramenta pode nos ajudar no desenvolvimento de aplicativos em VueJs.
E você o que achou do VueJS, comente abaixo!
Quer aprender mais sobre o VueJS? Clique aqui
Abs e até a próxima