A imagem mostra um computador com o logo do Vue.js no centro de sua tela.

(TUTORIAL) Como criar seu primeiro app com Vue.js

Plataformas e frameworks de front-end são bem variados. Alguns são robustos, outros mais simples. Alguns tem uma curva de aprendizado mais complexa, outros são tão simples quanto usar jQuery. Vue.js se destaca nesse ambiente como uma solução de design minimalista e um foco na adaptabilidade. É possível criar um site inteiro com o Vue ou mesmo só um único componente e ele funcionará perfeitamente, o que também o faz ter uma curva de aprendizado bem tranquila para desenvolvedores web.

Nesse artigo vamos passar pelos principais componentes de Vue.js e como configurar uma aplicação simples utilizando esse framework que a cada dia cresce em popularidade. Contudo, para começar é interessante lembrar do por quê da escolha de um framework de front-end como o Vue na sua jornada como desenvolvedor.

IMPORTANTE! Esse post pode parecer confuso caso você não possua conhecimentos em HTML, CSS e JavaScript. Portanto, sugerimos a leitura para quem já conhece essas tecnologias. Boa leitura!

Por que usar o Vue.js?

As estruturas (frameworks) de front-end, assim como a maior parte das plataformas similares, se apresentam como abstrações para tarefas mais comuns. Vue.js, mais especificamente, existe para abstrair o processo de criar componentes em HTML que estão em constante atualização e modificação por meio de JavaScript.

Algumas das principais funcionalidades são:

  • Criação de componentes HTML dinâmicos
  • Ligar ações nos elementos HTML a dados, mantendo escopo e contextos
  • Monitorar o HTML para renderizar novamente de forma automática quando necessário

Vamos a um exemplo rápido. Digamos que você tem uma lista de frutas. Seu código deve ser algo como:

HTML:

JavaScript:

Quando criamos o HTML manualmente, como no exemplo acima, temos duas situações indesejadas.

1- O código fica difícil de ser administrado com o tempo.

2- Não há conexão entre os dados e o HTML gerado depois de sua execução.

Se a coleção de frutas muda ao adicionar, editar ou retirar um elemento, alguma conexão é necessária para poder ter um código que re-renderiza o HTML para que essas mudanças sejam mostradas no DOM. Nesse exemplo estamos falando apenas de mostrar dados dinamicamente, mas se quisermos ir além e adicionar eventos a cada um desses elementos, como fazer uma ação ao clicar no nome da fruta, a situação fica ainda mais complicada de se gerir. Teríamos algo assim:

JavaScript:

Com o Vue.js separamos o HTML como um template que mostra o que criar baseado em dados e o framework renderizará automaticamente. O exemplo acima seria da seguinte maneira:

HTML:

JavaScript:

No Vue.js temos uma separação total entre os aspectos HTML do código JavaScript e a lógica do JS, fazendo tudo ficar como um pacote fechado e organizado. Se por algum motivo precisarmos trocar a lista de frutas, o HTML será renderizado novamente de forma automática para refletir esses dados. Isso começa a ficar bem interessante quando puxamos esses dados não de uma lista fechada, mas sim de banco de dados.

Com isso já entramos um pouco em como o Vue.js funciona, mas o ponto aqui é que, assim como outros frameworks de front-end, o Vue nos ajuda a criar páginas que, além de ficarem organizadas ao longo do seu desenvolvimento e escala, também se adaptam automaticamente quando há necessidade.

DOM orientado a dados

Na base do Vue.je definimos a correlação entre o HTML e algum tipo de dado. Então toda vez que o dado é alterado o HTML também é atualizado. A forma como isso acontece é que quando iniciamos um componente com o Vue.js esse objeto é modificado e tem suas propriedades trocadas por métodos “getter” e “setter” rastreáveis. Isto é, o Vue analisa o objeto de dados enquanto constrói o HTML com os respectivos dados dentro e, então, monitora mudanças feitas nos dados e sabe exatamente o que e quando alterar algo no DOM.

A partir dessa relação precisa entre os dados e sua representação no HTML é possível criar aplicações front-end com muito mais velocidade e minimizar os erros. Algo que é bem interessante então é poder focar no desenvolvimento da lógica da aplicação sem se preocupar muito com como os dados irão ser atualizados no HTML.

Criando seu primeiro App no Vue.js

O primeiro passo para a instalação do Vue.js é adicionar seu código no <head> da aplicação.

HTML:

Uma aplicação Vue.js é composta de um objeto de dados e um template HTML para se inserir os dados. Então, o próximo passo é adicionar um elemento para se tornar um componente do Vue.

HTML:

JavaScript:

Primeiro, definimos uma div para nosso template HTML do Vue.js. Dentro dele usamos duplas colchetes para interpolação de dados no HTML. Dentro já do app do Vue no JavaScript, nós simplesmente definimos os dados e o conectamos com a div para que lá ele renderize e use como template. Por fim, para incrementar um pouco as coisas, adicionamos um contador no app. Observe que o incremento do contador está apenas no JavaScript e ele automaticamente já atualiza no HTML.

Isso é tudo que precisamos para a criação de uma aplicação com Vue.js.

Eventos e métodos

Naturalmente, ter os elementos do DOM atualizados com base nos dados é só metade do que a maior parte das aplicações necessita. Ainda devemos considerar o lado inverso, em que os dados são atualizados com base em modificações no DOM e ações dos usuários. O Vue.js utiliza de eventos e métodos para esse tipo de situação. Métodos são funções armazenadas que rodam dentro do contexto do seu app.

Vamos atualizar o exemplo do contador e adicionar a habilidade de iniciar e parar o tempo ao invés de apenas deixá-lo rodando.

HTML:

JavaScript:

CSS:

No template HTML, adicionamos um botão para começar e um para parar o contador. Para conseguir isso precisamos que o texto do botão seja dinâmico e que exista um gestor de eventos para quando o botão é clicado.

Como declarar um evento?

No Vue.js, para declarar um evento em um elemento, utilizamos o prefixo “v-on:” aos evento do DOM padrões. Alguns exemplos:

  • ‘mouseover’ -> ‘v-on:mouser’
  • ‘keyupevent’ -> ‘v-on:keyup’
  • ‘click’ -> ‘v-on:click’

Algo que você pode ter notado é que, para o texto do botão, estamos chamando um método, ao contrário de o referenciar como uma propriedade armazenada. Em muitas situações, os dados que armazenamos não necessariamente estão no formato que desejamos mostrá-los na página. Métodos podem ser usados aqui para processar esses dados e mostrar da maneira correta; além de também ganharmos formas de relacionar esses dados automaticamente em suas atualizações.

Método ‘Toggle’

Na aplicação Vue.js temos agora uma nova propriedade que perpassa por alguns métodos e pela variável do contador. O método ‘toggle’, que está ligado ao evento de clique do botão, confere se a propriedade do contator está configurada, iniciando ou parando o contador respectivamente. Já o método ‘acaoContador’ é usado para mostrar a ação correta do botão, novamente baseado na variável do contador.

Uma vez que o método ‘toggle’ muda a propriedade do contador – e o método ‘acaoContador’, que também está no template do Vue.js, usa a propriedade do contador – toda vez que ele é chamado o template renderiza novamente o texto do botão.

É importante notar que mesmo quando não temos um valor inicial para a propriedade do contador, ela ainda precisa ser declarada ao criar a aplicação Vue.js. Se não declararmos a propriedade desde o início, ela não se comportará da maneira “reactive” – do Inglês, significando que ela não se atualizará de acordo com mudanças nos dados ou vice versa – e não atualizará o HTML.

No nosso exemplo, o HTML é atualizado uma vez a cada segundo enquanto o contador está rodando, então o método ‘acaoContador’ será chamado também quando o botão é recriado. O Vue.js nos possibilita otimizar isso utilizando cache nos resultados de um método e apenas chamando-o novamente quando um dado específico usado no método é alterado. Isso é bem útil se utilizar uma mesma propriedade já processada em vários lugares na página ao utilizar o valor do cache, ao invés de processar várias vezes o valor. Vale a pena aprofundar nesse aspecto posteriormente para otimizar a performance do app.

Conclusão

Após essa rápida demonstração do que o Vue.js é capaz, já é possível ter uma ideia de como utilizar em aplicações de vários tipos. Para quem está acostumado com jQuery é também uma forma de entender que a manipulação do DOM pode ser mais simples e automática.

Apesar de bem minimalista, o Vue.js é bastante poderoso e pode contribuir muito para a velocidade de implementação de novos projetos.

Se você se interessou e quiser saber mais sobre o tema, dê uma olhada nesse curso bem interessante sobre Vue.js. Tenho certeza que vai te ajudar muito!

O que você achou desse post?

1 point
Upvote Downvote
André Lug

Escrito por André Lug

Apaixonado por design e desenvolvimento de websites. De vez em quando gosta de escrever sobre produtividade, como é ser um freelancer e algumas reflexões da vida. Fundador do Iglu Online.

Comentários

Leave a Reply

Deixe uma resposta

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

Loading…

0

Comentários

Comentários

Os 6 frameworks e bibliotecas JavaScript que você deveria conhecer!

Os 6 frameworks e bibliotecas JavaScript que você deveria conhecer!

E se as seleções da copa do mundo fossem editores de texto e IDEs? | Becode

E se as seleções da Copa do Mundo fossem editores de texto e IDEs?