</>CodeLab 教程
教程参考手册实例练习
{{dark?'浅色':'夜间'}}
教程 / {{current.name}} / {{active.title}}

{{current.name}} 教程

{{current.desc}}

学习路径

{{x.title}}

{{x.summary}}

{{active.title}}

{{active.body}}

代码示例

{{active.code}}
运行示例复制代码

{{current.name}} 参考手册

按主题整理常用语法、对象、函数和开发约定。每个条目都会配套示例，适合查阅与复习。

{{x.title}}

语法说明 · 参数解释 · 常见用法

{{current.name}} 实例练习

通过小任务检验学习结果，从读懂代码走向独立完成项目。

开始练习
\n'),lesson('响应式状态','让页面跟随数据变化','ref 和 reactive 管理状态，模板会在状态变化后自动更新。','const count = ref(0)\nfunction add(){ count.value++ }'),lesson('路由与接口','连接真实应用','用路由组织页面，用异步请求加载服务端数据，并处理加载和错误状态。','const courses = ref([])\ncourses.value = await fetch("/api/courses").then(r => r.json())')], react:[lesson('组件与 JSX','用组件构建界面','React 组件接收 props 并返回 JSX，保持组件职责单一更容易测试。','function CourseCard({ name }) {\n return

{name}

\n}'),lesson('State 与事件','响应用户操作','state 保存会变化的数据，事件处理函数负责更新状态。','const [count, setCount] = useState(0);\n'),lesson('Effect 与请求','同步外部数据','Effect 适合订阅或请求等外部副作用，注意清理和加载状态。','useEffect(() => {\n fetch("/api/courses").then(setCourses)\n}, [])')], node:[lesson('模块与运行时','认识 Node.js','Node.js 让 JavaScript 可以运行在服务端，模块系统负责组织可复用代码。','import http from "node:http";\nconst server = http.createServer((req,res) => res.end("ok"));'),lesson('HTTP API','提供后端接口','API 需要明确方法、状态码和响应格式，并校验客户端输入。','app.get("/api/courses", async (req,res) => {\n res.json(await listCourses());\n});'),lesson('异步与数据库','处理真实业务','使用 async/await 管理异步流程，数据库连接要复用并正确关闭。','const rows = await db.query("SELECT * FROM courses");')] }; const make=(key,name,desc)=>({key,name,desc,lessons:topicSets[key]||topics}); createApp({setup(){const languages=[make('html','HTML','网页结构、语义化标签和表单。'),make('css','CSS','布局、响应式设计和视觉样式。'),make('js','JavaScript','网页交互、数据处理和异步能力。'),make('py','Python','基础语法、自动化、数据处理和 Web 开发。'),make('java','Java','面向对象、集合和服务端开发基础。'),make('cpp','C / C++','内存、指针、类和高性能程序。'),make('cs','C#','.NET 应用、类型系统和面向对象。'),make('php','PHP','动态网站和服务端接口。'),make('sql','SQL / MySQL','查询、表结构、索引和数据分析。'),make('ts','TypeScript','大型 JavaScript 项目的类型安全。'),make('go','Go','并发、接口和服务开发。'),make('rust','Rust','所有权、借用和可靠系统程序。'),make('vue','Vue 3','组件、路由和状态管理。'),make('react','React','组件、Hooks 和前端工程。'),make('node','Node.js','后端服务和 API。')];const current=ref(languages[0]);const active=ref(current.value.lessons[0]);const query=ref('');const tab=ref('learn');const result=ref('');const dark=ref(false);const filtered=computed(()=>languages.filter(l=>(l.name+l.desc).toLowerCase().includes(query.value.toLowerCase())));function choose(l){current.value=l;active.value=l.lessons[0];tab.value='learn';result.value=''}function run(){result.value='示例运行成功，输出结果符合预期'}function copy(){navigator.clipboard?.writeText(active.value.code);ElementPlus.ElMessage.success('代码已复制')}return{languages,current,active,query,tab,result,dark,filtered,choose,run,copy}}}).use(ElementPlus).mount('#app');