夜雨聆风
一个 10 天赶出来的“小脚本”，怎么就成了互联网的水和电？「不懂JS，也能前端？」我们继续来聊 JavaScript。
上一篇我们装好了 Node.js，用 Vue 搭建出了第一个页面。
今天，我们走进 Vue 的核心世界，理解它最根本的设计思想。
上一期结束时，我们改了一行文字，看到浏览器自动刷新。你可能会好奇：App.vue里的<template>、<script>这些奇奇怪怪的标签，到底是什么意思？那个HelloWorld又是从哪冒出来的？
这一篇，我们就把这些问号一个一个掰开揉碎。
- 1 -
组件：现代前端的“乐高积木”
回忆一下你见过的任何网页：导航栏、侧边栏、内容区、评论区……每一个独立的“块”，在 Vue 的世界里，都可以被封装成一个组件。
组件就像一个乐高积木块：
每个积木有自己的形状和颜色（外观）
每个积木可以和其他积木拼接（组合）
同一个积木可以在不同地方反复使用（复用）
比如一个“点赞按钮”，你今天把它放在文章底部，明天放在评论旁边——只需要写一次组件代码，到处都能用。这就是组件化思维的核心：分而治之，重复利用。
- 2 -
单文件组件：.vue 文件的三位一体
打开我们上一篇项目里的 src/App.vue，你会看到这样的结构：
<scriptsetup>// 这里是 JavaScript 逻辑import HelloWorld from './components/HelloWorld.vue'</script><template><!-- 这里是 HTML 结构 --><header><imgalt="Vue logo"class="logo"src="./assets/logo.svg" /><divclass="wrapper"><HelloWorldmsg="You did it!" /></div></header></template><stylescoped>/* 这里是 CSS 样式 */header {line-height: 1.5;}</style>
一个 .vue 文件，就像一个微型的“三明治”：
<template> | ||
<script> | ||
<style> |
过去写网页，HTML、CSS、JS 三个文件分开存放，找代码要横跳好几个窗口。Vue 把它们收拢在同一个文件里，一个组件该有的东西，一眼看完。这种设计，叫 单文件组件。
- 3 -
模板语法：用 {{ }} 把数据“塞”进页面
Vue 的 <template> 里，除了正常的 HTML 标签，还多了一些“魔法标记”。最常用的，就是双花括号 {{ }}，学名叫插值表达式。
我们做个实验。打开 src/App.vue，在 <script setup> 里加一行数据定义：
<scriptsetup>import HelloWorld from './components/HelloWorld.vue'// 定义一个变量：页面标题const pageTitle = "这是我的第一个 Vue 页面"</script>
然后在 <template> 里用 {{ }} 把它渲染出来：
<template><header><imgalt="Vue logo"class="logo"src="./assets/logo.svg" /><h1>{{ pageTitle }}</h1> <!-- 这行是新增的 --><divclass="wrapper"><HelloWorldmsg="You did it!" /></div></header></template>
保存文件，切回浏览器，你会看到页面上多了一行醒目的标题，内容正是我们定义的 pageTitle。
这就是 Vue 最核心的魔法：数据和视图自动同步。 你只需要操心数据怎么变，Vue 会负责把页面更新到该有的样子。
- 4 -
ref()：让数据变“活”
上面的 pageTitle 是一个静态字符串。如果我想让标题过几秒自动变，该怎么办？
这就需要一个能“响应”变化的数据容器：ref()。
把 <script setup> 改成这样：
<scriptsetup>import { ref } from 'vue' // 引入 refimport HelloWorld from './components/HelloWorld.vue'const pageTitle = ref("这是我的第一个 Vue 页面") // 用 ref() 包起来</script>
ref() 就像一个魔法盒子。你把数据放进去，它就会“监视”数据的变化。盒子里的值变了，页面上用到它的地方就自动更新。
现在让标题“活”起来。我们加一个 setTimeout，3 秒后自动改标题：
<scriptsetup>import { ref } from 'vue'import HelloWorld from './components/HelloWorld.vue'const pageTitle = ref("这是我的第一个 Vue 页面")// 3 秒后，标题自动变setTimeout(() => {pageTitle.value = "Hello Vue！我自己变的！"}, 3000)</script>
注意：在 JavaScript 里读取或修改 ref 的值，需要加 .value。但在 <template> 里用 {{ }} 时，不需要 .value，Vue 会自动帮你拆开盒子。
保存，刷新页面。等 3 秒，你会看到标题悄无声息地变了——没有任何页面刷新，没有闪白屏。这就是第一篇提到的“数据驱动视图”。
- 5 -
组件怎么嵌套：引入、挂载、使用
我们再看一眼 <template> 里的这行代码：
<HelloWorldmsg="You did it!" />这其实是在使用另一个组件。使用一个组件，分三步走：
第一步：引入
import HelloWorld from './components/HelloWorld.vue'告诉 Vue：“我找到了 components 文件夹里的这个组件文件，把它拿到这里来。”
第二步：挂载（Vue 3 的 <script setup> 语法会自动完成这一步，你用 import 引入的组件可以直接在模板里使用）
第三步：使用
<HelloWorldmsg="You did it!" />在 <template> 里像写一个自定义 HTML 标签一样，用它就行。msg="You did it!" 是在给组件传递参数，这个我们后面的文章再细讲。
- 6-
动手时间：创建你的第一个自定义组件
光看不动手等于没看。我们来创建一个“问候卡片”组件。
第一步：新建文件在 src/components/ 文件夹下，新建一个文件 GreetingCard.vue。
第二步：写组件代码
<scriptsetup>import { ref } from 'vue'const name = ref("访客")const greeting = ref("欢迎来到我的网站！")</script><template><divclass="card"><h2>你好，{{ name }}！</h2><p>{{ greeting }}</p></div></template><stylescoped>.card {border: 2px solid #42b883;border-radius: 12px;padding: 20px;margin: 20px auto;max-width: 400px;text-align: center;background: #f9f9f9;}</style>
第三步：在 App.vue 里用这个组件打开 src/App.vue，引入并使用它：
<scriptsetup>import HelloWorld from './components/HelloWorld.vue'import GreetingCard from './components/GreetingCard.vue' // 新增引入</script><template><header><imgalt="Vue logo"class="logo"src="./assets/logo.svg" /><divclass="wrapper"><HelloWorldmsg="You did it!" /><GreetingCard /> <!-- 新增使用 --></div></header></template>
保存，看浏览器。你的“问候卡片”已经出现在页面上了！试着改改 GreetingCard.vue 里的 name 和 greeting 变量值，看看页面变化。
今天，我们理解了三个核心概念：
组件：页面上可复用的“积木块”
单文件组件：
template+script+style三位一体响应式数据：
ref()和{{ }}配合，数据变了，页面自动跟着变
你可能会觉得概念有点多。没关系——写代码就像学骑车，骑上去晃两下比看十遍说明书管用。 打开编辑器，动手改一改，玩一玩，比什么都实在。
下一篇，我们将给组件装上“交互神经”：点击按钮有反应，输入文字能实时显示，让页面从“只能看”变成“能动弹”。
觉得有收获？点个关注，下一篇带你写第一个有交互功能的页面！ 🚀
欢迎关注「匠吱」，一起踏上「编程之路」
