🚀 Curso Completo de Vue.js – Matheus Battisti

Bem-vindo(a) ao repositório mais completo para quem quer aprender Vue.js do zero ao avançado! Aqui você encontra todos os exemplos, projetos e exercícios do curso do Matheus Battisti, organizados e comentados para facilitar seu aprendizado e evolução como dev front-end.

Organização e curadoria: Thiago Matos Tertuliano
Curso original: Matheus Battisti – Hora de Codar

---

📚 Sobre o Repositório

Este repositório é ideal para:

• Quem está começando no Vue.js e quer aprender de forma prática;
• Quem já conhece o básico e quer revisar ou aprofundar conceitos;
• Professores e instrutores que buscam material didático de qualidade;
• Quem quer ter exemplos prontos para consultar e adaptar em projetos reais.

Cada pasta representa um módulo do curso, com exemplos práticos, projetos completos e muitos comentários no código para facilitar o entendimento.

---

🛠️ Pré-requisitos

• Node.js (recomendado: versão 14 ou superior)
• npm (gerenciador de pacotes do Node)
• Navegador moderno (Chrome, Firefox, Edge, etc.)
• (Opcional) VSCode ou outro editor de código

Para projetos Vue CLI, é recomendado instalar o Vue CLI globalmente:

npm install -g @vue/cli

---

🗂️ Estrutura das Pastas e O que Você Vai Aprender

1_Instalação_Vue

Exemplo básico de Vue via CDN. Aprenda a rodar Vue sem instalar nada, direto no navegador. Ideal para entender a essência do framework.

2_Input_Databiling_Vue.js

Manipulação de formulários e data binding. Veja como conectar inputs do HTML com variáveis do Vue de forma reativa.

3_Utilizando_Vue_CLI

Primeiro contato com o Vue CLI. Aprenda a criar projetos profissionais, entender a estrutura de pastas e rodar o servidor local.

4_Componentes_Vue

Criação e uso de componentes. Descubra como dividir sua aplicação em partes reutilizáveis e organizadas.

5_Dados_em_Componentes_Vue

Como trabalhar com dados internos dos componentes, reatividade e exibição dinâmica de informações.

6_Lifecycle_hooks-Vue

Entenda o ciclo de vida dos componentes Vue e como executar ações em cada etapa.

7_Hierarquia_de_Componentes_Vue

Hierarquia, composição e comunicação entre componentes (parent/child).

8_Diretivas_(v-if_v-show_v-for)_Vue

Uso prático das principais diretivas do Vue: v-if, v-show, v-for.

9_Atributos_Dinamicos_Vue

Como criar atributos dinâmicos e deixar seus componentes ainda mais flexíveis.

10_Metodos_Vue

Criação e uso de métodos para manipular dados, eventos e lógica de negócio.

11_CSS_Global_e_Scoped_Vue

Como aplicar estilos globais e locais (scoped) em componentes Vue.

12_Renderização_de_Listas_(v-for)

Renderização de listas, iteração de arrays e exibição dinâmica de coleções.

13_Eventos_submit_click_Vue

Manipulação de eventos de formulário e clique, validação e interação com o usuário.

14_Multiplos_Eventos_Vue

Como lidar com múltiplos eventos em um mesmo componente.

15_Reutilizacao_de_Componentes_Vue

Técnicas para criar componentes reutilizáveis e DRY (Don't Repeat Yourself).

16_Utilizando_Props_Vue

Passagem de dados entre componentes usando props, comunicação top-down.

17_Emit_Vue

Comunicação de filho para pai usando eventos customizados ($emit).

projeto_final_vue

Projeto completo "Make Your Burger":

• Vue 3 + Vue Router
• Backend fake com JSON Server
• Cadastro e gerenciamento de pedidos de hambúrguer
• Exemplo real de SPA (Single Page Application)

---

▶️ Como Rodar os Projetos

Projetos Simples (1 e 2)

1. Abra o arquivo index.html no navegador.
2. Pronto! Não precisa instalar nada.

Projetos Vue CLI (3 em diante)

1. Abra o terminal e navegue até a pasta do projeto (ex: cd 3_Utilizando_Vue_CLI/3_projeto_vue).
2. Instale as dependências:

   npm install
   

3. Rode o servidor de desenvolvimento:

   npm run serve
   

4. Acesse o endereço exibido no terminal (geralmente http://localhost:8080).

Projeto Final (projeto_final_vue)

1. Instale as dependências:

   npm install
   

2. Rode o backend fake (JSON Server):

   npm run backend
   

3. Em outro terminal, rode o frontend:

   npm run serve
   

4. Acesse http://localhost:8080 para usar o sistema.

---

🗺️ Roadmap de Estudos Sugerido

1. Faça os arquivos em ordem, do 1 ao 17.
2. Leia os comentários do código e tente modificar os exemplos.
3. Após cada módulo, tente criar um mini-projeto próprio usando o conceito aprendido.
4. No final, tente clonar o projeto_final_vue do zero, sem olhar o código, só consultando se travar.
5. Compartilhe seu progresso nas redes sociais e marque a comunidade!

---

❓ Dúvidas Frequentes (FAQ)

Preciso saber JavaScript para acompanhar? Sim, é importante ter uma base de JS moderno (ES6+), mas os exemplos são bem comentados.

Posso usar Yarn ao invés de npm? Sim! Basta rodar yarn install e yarn serve nos projetos Vue CLI.

Funciona no Windows, Linux e Mac? Sim, todos os projetos são multiplataforma.

Posso usar Vite ao invés de Vue CLI? Pode! Mas os exemplos estão estruturados para Vue CLI, então adapte conforme sua experiência.

Onde encontro mais material?

• Documentação Oficial Vue.js
• Canal Matheus Battisti
• Comunidade Vue.js Brasil

---

💡 Dicas de Ouro

• Experimente, quebre, refaça! O melhor jeito de aprender é praticando.
• Use o DevTools do Vue para inspecionar componentes e estados.
• Compartilhe dúvidas e soluções com a comunidade.
• Siga o autor e o organizador nas redes sociais para mais dicas e novidades!

---

📲 Compartilhe e Siga!

Se este repositório te ajudou, compartilhe no Instagram, marque @tthiagoficial_! ⭐

Vamos juntos fortalecer a comunidade Vue.js no Brasil! 🚀

---

Bons estudos e #BoraCodar!