Este guia aborda os conceitos fundamentais do Vue.js, desde a configuração inicial de um projeto até a criação de componentes interativos. Vamos explorar como gerenciar estados, renderizar listas e manipular eventos.

1. Integração de Módulos Externos no Projeto

Para adicionar funcionalidades de terceiros ao seu projeto Vue, você pode instalar pacotes via npm e importá-los no ponto de entrada da sua aplicação, geralmente em main.js.

Primeiro, instale a biblioteca desejada (ex: Bootstrap CSS):

npm install bootstrap

Em seguida, importe o módulo em main.js:

// Configuração inicial da aplicação Vue
import Vue from 'vue';
import App from './App.vue'; // Componente principal da aplicação

// Importando estilos de uma biblioteca externa, como o Bootstrap
import 'bootstrap/dist/css/bootstrap.css';

Vue.config.productionTip = false;

new Vue({
  // A função render é uma forma mais flexível de renderizar o componente raiz
  render: h => h(App),
}).$mount('#app'); // Monta a instância Vue no elemento HTML com id "app"

2. Seu Primeiro Componente Vue: "Olá, Vue!"

Todo componnete Vue é composto por três seções principais: <template> (estrutura HTML), <script> (lógica JavaScript) e <style> (estilos CSS).

O atributo scoped na tag <style> garante que os estilos aplicados sejam exclusivos para este componente, evitando conflitos com outros estilos na aplicação.

Vamos criar um componente simples que exibe uma mensagem de boas-vindas:

<template>
  <div id="app-saudacao" class="container mt-4">
    <h1>{{ mensagemBoasVindas }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'ComponenteSaudacao',
    data() {
      return {
        mensagemBoasVindas: "Olá, Mundo Vue!"
      }
    }
  }
</script>

<style scoped>
  h1 {
    color: #42b983;
    text-align: center;
  }
</style>

O objeto data em um componente Vue funciona como o modelo de dados (Model) em um padrão MVVM (Model-View-ViewModel), fornecendo os dados reativos que a View (<template>) irá renderizar.

3. Renderizando Listas e Dados Complexos

O Vue.js oferece a diretiva v-for para iterar sobre arrays ou objetos. É crucial usar a propriedade :key em v-for para ajudar o Vue a rastrear a identidade de cada nó e otimizar a renderização.

Iterando sobre um Array de Objetos

Considere um array de produtos:

data() {
  return {
    listaDeProdutos: [
      { codigo: 'P001', nome: 'Monitor LED', preco: 799.99 },
      { codigo: 'P002', nome: 'Teclado Mecânico', preco: 250.00 },
      { codigo: 'P003', nome: 'Mouse Gamer', preco: 120.50 }
    ]
  }
}

Para exibir esta lista, podemos usar v-for:

<div class="mt-4">
  <h3>Nossos Produtos:</h3>
  <ul class="list-group">
    <li v-for="(itemProduto, indice) in listaDeProdutos" :key="itemProduto.codigo" class="list-group-item">
      {{ indice + 1 }}. {{ itemProduto.nome }} - R$ {{ itemProduto.preco.toFixed(2) }}
    </li>
  </ul>
</div>

Aqui, itemProduto é o objeto atual na iteração e indice é o índice baseado em zero do array.

Iterando sobre Propriedades de um Objeto

Podemos também iterar sobre as propriedades de um objeto:

data() {
  return {
    // ...
    perfilUsuario: {
      nomeCompleto: 'João Silva',
      idade: 30,
      email: 'joao.silva@example.com',
      status: 'ativo'
    }
  }
}

E renderizá-lo assim:

<div class="mt-4">
  <h3>Detalhes do Usuário:</h3>
  <ul class="list-unstyled">
    <li v-for="(valor, chave) in perfilUsuario" :key="chave">
      <strong>{{ chave | formatarChave }}:</strong> {{ valor }}
    </li>
  </ul>
</div>
<script>
// Exemplo de filtro simples (para formatar a chave, ex: "nomeCompleto" para "Nome Completo")
export default {
  // ...
  filters: {
    formatarChave(value) {
      return value.replace(/([A-Z])/g, ' $1')
                  .replace(/^./, function(str){ return str.toUpperCase(); });
    }
  }
}
</script>

Neste caso, valor é o valor da propriedade e chave é o nome da propriedade.

4. Vinculação Bidirecional de Dados com v-model

A diretiva v-model é essencial para criar formulários e entradas de dados interativos no Vue.js, permitindo a vinculação bidirecional de dados entre um elemento de formulário e o estado do componente.

<div class="mt-4">
  <h3>Entrada de Dados:</h3>
  <div class="form-group">
    <label for="campoNome">Seu Nome:</label>
    <input type="text" id="campoNome" class="form-control" v-model="dadosForm.nomeDigitado">
  </div>
  <p>Você digitou: <strong>{{ dadosForm.nomeDigitado }}</strong></p>
</div>

<script>
  export default {
    name: 'ComponenteFormulario',
    data() {
      return {
        dadosForm: {
          nomeDigitado: ''
        }
      }
    }
  }
</script>

Qualquer alteração no input reflete-se automaticamente em dadosForm.nomeDigitado e vice-versa.

5. Manipulação de Eventos com @click

No Vue, os eventos são tratados através da diretiva v-on:, ou sua forma abreviada @. O evento @click é amplamente usado para botões e outros elementos clicáveis.

Vamos criar uma função de login simples:

<div class="mt-4">
  <h3>Tela de Login:</h3>
  <div class="form-group">
    <label for="username">Usuário:</label>
    <input type="text" id="username" class="form-control" v-model="credenciais.usuario">
  </div>
  <div class="form-group">
    <label for="password">Senha:</label>
    <input type="password" id="password" class="form-control" v-model="credenciais.senha">
  </div>
  <button @click="processarLogin" class="btn btn-success">Entrar</button>
</div>

<script>
  export default {
    name: 'ComponenteLogin',
    data() {
      return {
        credenciais: {
          usuario: '',
          senha: ''
        }
      }
    },
    methods: {
      processarLogin(evento) { // O objeto de evento DOM é passado se nenhum argumento for fornecido
        if (this.credenciais.usuario === 'admin' && this.credenciais.senha === 'senha123') {
          alert('Login bem-sucedido!');
        } else {
          alert('Credenciais inválidas!');
        }
        console.log("Evento de click: ", evento);
      }
    }
  }
</script>

Se você precisar passar argumentos específicos para o método, basta adicioná-los após o nome do método. O objeto de evento original ainda pode ser acessado com o parâmetro especial $event.

<button @click="processarLoginComParametros('admin', 'senha123', $event)" class="btn btn-info">Entrar (Com Parâmetros)</button>

methods: {
  processarLoginComParametros(user, pass, event) {
    console.log(`Tentando login com: ${user} / ${pass}`);
    console.log("Evento original:", event);
    // ... lógica de login
  }
}

6. Renderização Condicional com v-if, v-else-if, v-else

A diretiva v-if permite renderizar um bloco de elementos condicionalmente. O bloco só será renderizado se a expressão da diretiva retornar um valor verdadeiro.

<div class="mt-4">
  <h3>Classificação de Idade:</h3>
  <div v-if="idadeUsuario < 13">Criança</div>
  <div v-else-if="idadeUsuario < 18">Adolescente</div>
  <div v-else-if="idadeUsuario < 60">Adulto</div>
  <div v-else>Idoso</div>
</div>

<script>
  export default {
    name: 'ComponenteCondicional',
    data() {
      return {
        idadeUsuario: 25 // Altere para testar as condições
      }
    }
  }
</script>

v-if remove completamente o elemento do DOM quando a condição é falsa.

7. Alternância de Visibilidade com v-show

A diretiva v-show também é usada para renderização condicional, mas de uma maneira diferente de v-if. Um elemento com v-show sempre será renderizado no DOM; v-show simplesmente alterna a propriedade CSS display do elemento.

<div class="mt-4">
  <h3>Status de Visibilidade:</h3>
  <button @click="alternarVisibilidade" class="btn btn-warning mb-3">
    Alternar {{ estaVisivel ? 'Ocultar' : 'Mostrar' }}
  </button>
  <p v-show="estaVisivel" class="alert alert-info">Este parágrafo está visível!</p>
  <p v-show="!estaVisivel" class="alert alert-secondary">Este parágrafo está oculto!</p>
</div>

<script>
  export default {
    name: 'ComponenteVisibilidade',
    data() {
      return {
        estaVisivel: true
      }
    },
    methods: {
      alternarVisibilidade() {
        this.estaVisivel = !this.estaVisivel;
      }
    }
  }
</script>

Use v-show para elementos que são alternados com frequência, pois a alternância de CSS é menos custosa que a remoção e reinserção de elementos no DOM.