Vue: introdução e reatividade

Neste capítulo você vai montar a vitrine do Ateliê com Vue por CDN. O projeto-fio é o Ateliê Boa Viagem, ateliê digital fictício em Boa Viagem, Recife.

Seu ponto de partida

Use o exemplo 07-vue-intro do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa.

Use servidor só em 127.0.0.1 quando o README do exemplo pedir HTTP local. Abrir ou testar não publica nada.

Como praticar

Leia → copie ou digite → mude uma coisa → preveja → salve → recarregue → confira. Restaure cada experiência antes da próxima. Faça as atividades antes de abrir as respostas comentadas.

Dados reativos no setup

No Vue 3 com CDN, createApp e ref ligam dados à interface. Mudar o ref atualiza o template.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

<p>{{ mensagem }}</p>

Mude uma coisa e preveja

Altere a mensagem inicial no script.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O parágrafo muda.

Se não acontecer

Confira se montou em #app.

v-model em campos

v-model sincroniza input e dado. É atalho para value + evento de atualização.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

<input v-model="oficina" aria-label="Nome da oficina">

Mude uma coisa e preveja

Digite um nome e mostre abaixo com interpolação.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O texto acompanha a digitação.

Se não acontecer

Garanta que oficina é um ref.

Quando escolher Vue neste volume

Vue brilha em progressividade: você pode começar pequeno. Aqui é introdução, não catálogo completo da API.

Faça na sua cópia

Confira o trecho no contexto do exemplo antes de mudar.

const app = Vue.createApp({ setup() { /* ... */ } });
app.mount('#app');

Mude uma coisa e preveja

Acrescente um segundo ref e mostre na página.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

Os dois valores aparecem.

Se não acontecer

Retorne os refs no objeto do setup.

Atividades

Atividade 1

O que createApp faz?

Atividade 2

Para que serve v-model?

Atividade 3

Este módulo Vue é exaustivo?

Respostas comentadas

Resposta da atividade 1

Cria a aplicação Vue para montar num elemento.

Resposta da atividade 2

Ligar campo de formulário a um dado reativo.

Resposta da atividade 3

Não; é introdução curta no percurso.

O arquivo completo

Referência do exemplo 07-vue-intro, reproduzida aqui para que você possa conferir sem sair da página.

styles.css

:root{--ink:#1a1a1a;--bg:#f7f4ef;--brand:#1f3a5f;--accent:#c45c26;--line:#d9d2c5;--focus:#0b57d0}
*{box-sizing:border-box}html{font-family:"Segoe UI",Tahoma,sans-serif;color:var(--ink);background:var(--bg)}
body{margin:0;line-height:1.5}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:10;background:#fff;padding:.5rem}
header,footer{background:var(--brand);color:#fff;padding:1rem 1.25rem}header a,footer a{color:#fff}
main{max-width:52rem;margin:0 auto;padding:1.25rem}h1{color:var(--brand);margin-top:0}
.card{background:#fff;border:1px solid var(--line);padding:1rem;margin:.75rem 0}
button{background:var(--accent);color:#fff;border:0;padding:.55rem 1rem;cursor:pointer}
.board{display:grid;grid-template-columns:repeat(3,4.5rem);gap:.4rem}
.square{width:4.5rem;height:4.5rem;font-size:1.5rem;background:#fff;border:2px solid var(--brand)}
label{display:block;margin:.5rem 0 .2rem;font-weight:600}
input,textarea{width:100%;max-width:28rem;padding:.45rem;border:1px solid var(--line)}
ul.nav{list-style:none;padding:0;display:flex;gap:1rem;flex-wrap:wrap;margin:0}
.status{font-weight:600;margin:.75rem 0}