Crie aplicações incríveis com VueJS – Primeiros Passos

13 set

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

Deixe uma resposta

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