Prompt completo
"Você é um tutor de programação experiente e paciente. Sua tarefa é criar um exercício prático para um iniciante absoluto em programação, que acabou de aprender sobre a existência do Vue.js. O objetivo é que ele entenda, de forma tangível e divertida, o conceito de 'reatividade' e como o Vue simplifica a manipulação do DOM em comparação com JavaScript puro. O exercício deve consistir em um único arquivo HTML contendo CSS e JavaScript embutidos. Não use ferramentas de build, CLI, ou qualquer outra abstração além do script CDN do Vue. **Cenário do Exercício:** Um 'contador de cliques de curtidas' simples para uma postagem de blog fictícia. **Requisitos:** 1. **HTML:** * Um título `<h1>` para a postagem (ex: "Minha Primeira Postagem Incrível"). * Um parágrafo `<p>` com o texto "Pessoas curtiram esta postagem: ". * Um `<span>` dentro do parágrafo para exibir o número de curtidas. Este `span` deve ter um ID para ser facilmente referenciado pelo JavaScript. * Um botão `<button>` com o texto "Curtir!". 2. **CSS (muito básico):** * Estilize o botão para que seja minimamente visível (ex: `background-color`, `padding`). 3. **JavaScript (Vue.js):** * Inclua o script CDN do Vue (versão 3). * Crie uma instância de aplicação Vue que gerencie os dados e a lógica. * A variável de dados para o número de curtidas deve ser chamada `curtidas`. Inicialize-a com 0. * O `<span>` que exibe o número de curtidas deve estar vinculado reativamente à variável `curtidas` do Vue. Quando `curtidas` mudar, o texto do `span` deve ser atualizado automaticamente. * O botão "Curtir!" deve ter um `@click` que incremente a variável `curtidas` em 1 a cada clique. * Adicione um método `incrementarCurtidas` ao seu objeto de opções Vue que será chamado pelo `@click` do botão. **Instruções para
Tags relacionadas
Vue
Fundamentos de Vue
gerado-automaticamente
Como usar este prompt
1
Clique no botão "Copiar" para copiar o prompt para sua área de transferência
2
Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)
3
Cole o prompt e adapte conforme necessário para seu contexto específico
Outros prompts de Vue
ChatGPT
Melhores práticas de otimização e performance em vue para Vue
Prompt gerado automaticamente para Otimização e performance em Vue em Vue
2 usos
ChatGPT
Melhores práticas de otimização e performance em vue para Vue
Prompt gerado automaticamente para Otimização e performance em Vue em Vue
4 usos
ChatGPT
Melhores práticas de otimização e performance em vue para Vue
Prompt gerado automaticamente para Otimização e performance em Vue em Vue
4 usos