Olá Pessoal! Nesta edição do PET Redação, vamos entender mais sobre um framework muito utilizado no mercado de desenvolvimento web, o Vue.js.

O que é e como funciona

Atualmente em sua terceira versão, o Vue.js é um framework JavaScript para construir interfaces de usuário. Ele utiliza HTML, CSS e JavaScript padrão e oferece um modelo de programação declarativo e baseado em componentes que auxilia no desenvolvimento eficiente de interfaces, independentemente de sua complexidade.

Comparação com outros frameworks

Ao comparar o Vue.js com outros frameworks populares, como React e Angular, é possível observar algumas semelhanças e diferenças importantes. Essas comparações podem ajudar a entender melhor o Vue.js e como ele se destaca em relação a outros frameworks. Vamos dar uma olhada em algumas dessas comparações a seguir.

• React: Vue.js e React compartilham muitas semelhanças, como o uso de um DOM virtual e a oferta de componentes de visualização reativos e compostos. No entanto, eles diferem em sua implementação interna e abordagem para otimização de desempenho, por exemplo, o Vue.js usa um sistema de reatividade baseado em observadores para rastrear alterações nos dados e atualizar automaticamente a interface do usuário quando necessário. Já o React oferece a possibilidade de usar o método shouldComponentUpdate para controlar quando um componente deve ser atualizado, evitando renderizações desnecessárias.
• Angular: Vue.js é considerado mais simples do que o Angular em termos de API e design, o que permite aos desenvolvedores aprenderem rapidamente e se tornarem produtivos. Além disso, o Vue.js é mais flexível e menos opinativo do que o Angular, permitindo que os desenvolvedores estruturem seus aplicativos da maneira que desejarem.

Exemplos de uso do Vue.js

Como comentado anteriormente, o Vue.js é um framework JavaScript progressivo que pode ser usado de várias maneiras para criar aplicativos da web. Vejamos algumas abordagens.

• Script autônomo: O Vue.js pode ser usado como um arquivo de script autônomo, sem a necessidade de uma etapa de construção. Isso geralmente é útil se você já tiver um framework de backend renderizando a maior parte do HTML ou se a lógica do frontend não for complexa o suficiente para que seja necessária uma etapa de construção.
• Web Components incorporados: É possível usar o Vue.js para criar Web Components padrão que podem ser incorporados em qualquer página HTML, independentemente de como eles são renderizados. Os Web Components resultantes podem ser incorporados em aplicativos legados, HTML estático ou até mesmo aplicativos construídos com outros frameworks. Isso oferece flexibilidade e permite que você aproveite os recursos em qualquer contexto.
• Aplicação de página única (SPA): Algumas aplicações requerem interatividade rica e profundidade no frontend. A melhor maneira de construir essas aplicações é usar uma arquitetura onde o Vue.js não apenas controla toda a página, mas também lida com atualizações de dados e navegação sem ter que recarregar a página. Esse tipo de aplicação é geralmente chamado de Aplicação de Página Única (SPA). O Vue.js fornece bibliotecas principais e suporte abrangente a ferramentas com uma experiência incrível para desenvolvedores para construir SPAs.

Como começar a usar o Vue.js

Para começar a usar o Vue.js, você pode seguir os seguintes passos:

1. Instale o Node.js: Certifique-se de ter uma versão atualizada do Node.js instalada em seu computador.
2. Instale o Vue CLI: O Vue CLI é uma ferramenta de linha de comando que ajuda a criar e gerenciar projetos Vue.js. Para instalá-lo, abra um terminal e execute o comando npm install -g @vue/cli2.
3. Crie um novo projeto: Com o Vue CLI instalado, você pode criar um novo projeto Vue.js executando o comando vue create nome-do-projeto, onde nome-do-projeto é o nome do seu projeto.
4. Execute o projeto: Depois de criar o projeto, navegue até a pasta do projeto e execute o comando npm run serve para iniciar o servidor de desenvolvimento local.

Além disso, existem muitos recursos disponíveis para ajudá-lo a começar a usar o Vue.js na própria documentação do framework, podendo ser acessada em “https://vuejs.org/guide/introduction.html”

Veja um exemplo de ‘Hello World’ utilizando vue:

<template>

  <h1>{{ message }}</h1>

</template>

<script setup>

import { ref } from 'vue'

const message = ref('Hello World!')

</script>

Dados reativos:

O Vue.js possui um sistema de dados reativos. Isso significa que quando você muda o estado do seu aplicativo (por exemplo, atualizando uma variável), o Vue automaticamente atualiza a interface do usuário para refletir essa mudança. Aqui está um exemplo:

var app = new Vue({
   el: '#app',
   data: {
      mensagem: 'Olá Vue!'
   }
})

Neste exemplo, mensagem é uma propriedade reativa. Se você alterar o valor de mensagem, qualquer parte da interface do usuário que esteja exibindo mensagem será automaticamente atualizada.

Diretivas

As diretivas são instruções especiais que você pode usar em seu HTML para controlar o comportamento do DOM. No Vue.js, as diretivas são prefixadas com v- para indicar que são atributos especiais fornecidos pelo Vue. Por exemplo, a diretiva v-if é usada para renderizar condicionalmente um bloco:

<div id="app">
   <p v-if="visivel">Agora você me vê</p>
</div>

Neste exemplo, o parágrafo será renderizado apenas se a propriedade visível for verdadeira.

Manipulação de eventos

O Vue.js facilita a resposta aos eventos do usuário, como cliques ou pressionamentos de teclas. Você pode usar a diretiva v-on para ouvir eventos DOM e executar algum código JavaScript quando eles ocorrem. Aqui está um exemplo:

<div id="app">
   <button v-on:click="contador++">Clique em mim</button>
   <p>Você clicou {{ contador }} vezes.</p>
</div>

Neste exemplo, estamos ouvindo o evento de clique no botão e incrementando o valor do contador cada vez que o botão é clicado.

Conclusão

Em resumo, o Vue.js é um framework JavaScript progressivo para construir interfaces de usuário. Ele oferece uma abordagem flexível, permitindo que os desenvolvedores usem o framework de várias maneiras, dependendo do caso de uso. Com uma API intuitiva e documentação robusta, o Vue.js é fácil de aprender e usar. Além disso, ele oferece desempenho otimizado e recursos avançados, como renderização declarativa e reatividade, tornando-o uma excelente escolha para construir aplicações complexas.

Autor: Guilherme Rodrigues Garcia