💚
ChatGPT intermediate

Prompt para fundamentos de vue em Vue

Prompt gerado automaticamente para Fundamentos de Vue em Vue

3 usos Vue

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