Vue js – Guia rápido

julho 18, 2025
FrontEnd

Introdução ao Vue.js

O Vue.js é um framework JavaScript progressivo, criado por Evan You em 2014, focado na construção de interfaces de usuário (UIs) e aplicações de página única (SPAs). Sua filosofia de “progressividade” permite aos desenvolvedores adotá-lo gradualmente: desde pequenas melhorias em projetos existentes até aplicações complexas com roteamento, gerenciamento de estado e build automatizado. Combinando simplicidade, performance e flexibilidade, o Vue tornou-se uma das ferramentas mais populares no ecossistema front-end.

Principais Características

Reactividade Automática:
O sistema de reatividade do Vue atualiza automaticamente a view quando dados mudam.
Componentização:
Uso de componentes reutilizáveis com HTML, CSS e JavaScript encapsulados.
Diretivas:
Atributos especiais (ex: v-if, v-for) para manipulação declarativa do DOM.
Ecossistema Integrado:
Ferramentas como Vue Router (roteamento), Vuex/Pinia (gerenciamento de estado) e Vite (build tool).

Conceitos Básicos com Exemplos

1. Instância Vue e Data Binding

A instância Vue é o núcleo de qualquer aplicação. Conecta-se a um elemento DOM e gerencia dados reativos.

Exemplo: Hello World

<div id="app">
  <p>{{ message }}</p>  <!-- Interpolação de texto -->
  <input v-model="message"> <!-- Two-way binding -->
</div>

<script>
  const { createApp } = Vue;
  const app = createApp({
    data() {
      return {
        message: "Olá Vue!"
      };
    }
  });
  app.mount('#app');
</script>

{{ message }}: Exibe o valor de message no HTML.
v-model: Sincroniza o valor do input com message (reatividade bidirecional).

2. Diretivas Essenciais

a) Condicionais com v-if e v-show

<div v-if="isVisible">Apareço se isVisible for true!</div>
<div v-show="isActive">Sempre no DOM, mas oculto via CSS!</div>

b) Loops com v-for

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ item.nome }}
  </li>
</ul>

<script>
  data() {
    return {
      items: [
        { nome: "Vue" },
        { nome: "React" },
        { nome: "Angular" }
      ]
    };
  }
</script>

:key: Otimiza a renderização de listas (obrigatório).

c) Eventos com v-on

<button @click="contador++">Incrementar</button> <!-- @click é equivalente a v-on:click -->
<p>Contador: {{ contador }}</p>

3. Componentes Reutilizáveis

Componentes permitem dividir a UI em blocos independentes.

Exemplo: Componente BotaoPersonalizado

<!-- BotaoPersonalizado.vue -->
<template>
  <button @click="acao">{{ texto }}</button>
</template>

<script>
  export default {
    props: ['texto'], // Props = inputs do componente
    emits: ['click'], // Comunica eventos ao componente pai
    methods: {
      acao() {
        this.$emit('click');
      }
    }
  };
</script>

Uso no Componente Pai:

<template>
  <BotaoPersonalizado texto="Clique-me!" @click="handleClick" />
</template>

<script>
  import BotaoPersonalizado from './BotaoPersonalizado.vue';

  export default {
    components: { BotaoPersonalizado },
    methods: {
      handleClick() {
        console.log("Botão clicado!");
      }
    }
  };
</script>

Tópicos Avançados

4. Gerenciamento de Estado com Pinia

Pinia (sucessor do Vuex) gerencia estado global de forma simples e tipada.

Exemplo: Store de Tarefas

// stores/tarefas.js
import { defineStore } from 'pinia';

export const useTarefasStore = defineStore('tarefas', {
  state: () => ({
    tarefas: [],
  }),
  actions: {
    adicionarTarefa(tarefa) {
      this.tarefas.push(tarefa);
    },
  },
  getters: {
    tarefasPendentes: (state) => state.tarefas.filter(t => !t.concluida),
  },
});

Uso em um Componente:

<template>
  <div v-for="tarefa in store.tarefasPendentes" :key="tarefa.id">
    {{ tarefa.texto }}
  </div>
</template>

<script setup>
  import { useTarefasStore } from '@/stores/tarefas';
  const store = useTarefasStore();
</script>

5. Roteamento com Vue Router

Navegação entre “páginas” sem recarregar o browser.

Configuração Básica:

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Sobre from '../views/Sobre.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/sobre', component: Sobre },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

Uso no App.vue:

<template>
  <router-link to="/">Home</router-link>
  <router-link to="/sobre">Sobre</router-link>
  <router-view></router-view> <!-- Onde os componentes são renderizados -->
</template>

6. Composição com Composition API

A Composition API (Vue 3+) oferece maior flexibilidade para organizar a lógica.

Exemplo: Contador Reativo

<template>
  <button @click="incrementar">{{ count }}</button>
</template>

<script setup>
  import { ref, computed } from 'vue';

  const count = ref(0); // Variável reativa

  function incrementar() {
    count.value++;
  }

  const dobro = computed(() => count.value * 2); // Getter reativo
</script>

ref(): Cria referências reativas para valores primitivos.
computed(): Define propriedades calculadas.

Vantagens do Vue.js

Curva de Aprendizado Suave: Sintaxe baseada em HTML + JavaScript.
Performance: Virtual DOM eficiente e mecanismos de otimização.
Ferramentas Robustas: Vue Devtools, Vite, Vue CLI.
Comunidade Ativa: Suporte global e documentação detalhada.

Quando Usar Vue?

Projetos de pequeno a médio porte: Rapidez no desenvolvimento.
Migração progressiva: Integração em aplicações existentes (ex: jQuery).
SPAs complexas: Com Vue Router e Pinia.
Desenvolvimento de componentes: Design systems reutilizáveis.

Conclusão

O Vue.js destaca-se pela simplicidade sem sacrificar poder. Seja para prototipagem rápida ou aplicações empresariais, sua abordagem progressiva e ecossistema maduro oferecem a combinação ideal de produtividade e performance. Experimente começar com um projeto simples e explore gradualmente recursos como Pinia, Vue Router e Composition API para dominar o framework!

<!-- Exemplo Final: Lista de Tarefas -->
<div id="app">
  <input v-model="novaTarefa" @keyup.enter="adicionarTarefa">
  <ul>
    <li v-for="(tarefa, index) in tarefas" :key="index">
      {{ tarefa }}
      <button @click="removerTarefa(index)">×</button>
    </li>
  </ul>
</div>

<script>
  const { createApp, ref } = Vue;
  createApp({
    setup() {
      const novaTarefa = ref('');
      const tarefas = ref([]);

      function adicionarTarefa() {
        tarefas.value.push(novaTarefa.value);
        novaTarefa.value = '';
      }

      function removerTarefa(index) {
        tarefas.value.splice(index, 1);
      }

      return { novaTarefa, tarefas, adicionarTarefa, removerTarefa };
    }
  }).mount('#app');
</script>