O Vue.js é um framework JavaScript para construir interfaces de usuário. Com ele, você descreve como a tela deve ficar a partir dos dados, e o Vue cuida de atualizar o HTML sempre que esses dados mudam.

Nesta primeira parte do workshop vamos construir a base que usaremos o tempo todo: entender o que é o Vue, de onde ele veio, como criar um projeto e como ele se compara ao JavaScript puro.

Como o Vue surgiu

O Vue foi criado por Evan You, que trabalhava no Google com AngularJS. Ele gostava da ligação entre dados e tela que o AngularJS oferecia, mas achava o framework pesado demais. A ideia foi criar algo mais leve, ficando só com a parte boa, sem o peso de um framework enorme.

Ano	Marco	O que mudou
2014	Lançamento	O Vue.js é publicado como projeto open source focado na camada de visão.
2016	Vue 2	Virtual DOM, mais performance e explosão de adoção na comunidade.
2020	Vue 3	Reescrito em TypeScript, com a Composition API e um núcleo menor.
2021	`<script setup>`	A sintaxe enxuta que vamos usar hoje se torna estável.
Hoje	Vue 3.6	Versão usada no workshop. O Vue 2 teve fim de suporte em 2023.

O que é o Vue

Existem quatro características que resumem bem o Vue:

Declarativo: você descreve como a tela deve ficar a partir dos dados, e o Vue cuida de atualizar o HTML;
Reativo: quando um dado muda, a tela muda junto, sem document.querySelector nem innerHTML;
Baseado em componentes: a interface é dividida em peças reutilizáveis (header, card, botão), cada uma com seu HTML, sua lógica e seu CSS;
Progressivo: dá para usar num pedaço de uma página ou num projeto inteiro.

<aside> 💡 Relação com o Nuxt: o Nuxt é construído em cima do Vue. Tudo desta parte vale lá também. O Nuxt só acrescenta rotas, servidor e importação automática.

</aside>

Do JavaScript puro para o Vue

Para entender a diferença na prática, imagine que queremos exibir uma lista de cards de personagens. Com JavaScript puro, montamos o HTML na mão usando template string e innerHTML:

const card = `
    <article class="card">
        <h3>${character.name}</h3>
        <p>${character.species}</p>
    </article>`;

list.innerHTML += card;

Aqui você controla o DOM manualmente e precisa lembrar de atualizar tudo sempre que algum dado mudar.