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