让它动起来

你的个人资料卡片很好看——但它只是杵在那里。点它、戳它,毫无反应。这是因为 HTML 负责结构,Tailwind 负责样式。行为是 JavaScript 的工作。

这里有个没人告诉初学者的秘密:vibe coding 的时候,你不用背 JavaScript。你描述应该发生什么,AI 来写代码。行为就是一句话:

「当有人点击点赞按钮时,爱心旁边的数字加 1。」

把这个提示词交给 AI,它会产出像这样的一小段代码:

const btn = document.getElementById("like-btn");
btn.addEventListener("click", () => {
  likes = likes + 1;
  count.textContent = likes;
});

就这样。每次都是三步:

1. 找到元素(getElementById)
2. 监听事件(addEventListener("click", ...))
3. 改变点什么(textContent、一个 class,什么都行)

找到、监听、改变。你用过的几乎每个网站上的每个交互——下拉菜单、深色模式开关、点赞按钮——都是这个模式的某种变体。

这节课你要给卡片加一个点赞计数器。课程结束时,你点一下爱心,就能看到一个由你掌控的数字往上涨。那一刻,页面就变成了应用。