🐸 青蛙编程网

Vue 教程

学完 HTML/CSS/JS/jQuery,你已经能用原生 JS 操作 DOM 凑出一个交互页面。Vue 是"数据驱动"的现代框架:改数据,页面自动变,不再手工 $('#x').text(...)。

Vue 3.x(Composition API)是本教程基线。入门阶段全程用公开 CDN 的免构建写法——不装 Node、不跑 npm,单文件 .html 就能边学边练,所有示例都可直接在页面的在线运行场里跑。

技术路线

章节 核心内容
1. Vue 是什么 数据驱动思想,与 jQuery 的对比
2. 第一个页面:零工具起步 公开 CDN 引入、初次挂载
3. 模板语法 插值、指令、条件与列表
4. 响应式数据 ref 与 reactive
5. 事件与方法 v-on、事件处理
6. 组件基础 组件的定义、注册与复用
7. 组件通信 props 下行、emit 上行
8. 综合练习:Vue 版待办清单 jQuery 练习的 Vue 重构 + 工程化路线

从 1. Vue 是什么 开始吧!