单元1
JavaScript概述................1
【学习导读】..........................................1
【学习目标】..........................................1
【思维导图】..........................................1
【相关知识】..........................................2
1.1 JavaScript简介...........................2
1.1.1 JavaScript的特点.............2
1.1.2 JavaScript的发展历程......2
1.2 VS Code简介..............................3
1.2.1 安装VS Code..................3
1.2.2 设置VS Code..................6
1.2.3 利用VS Code创建HTML模板文件...........................7
1.3 使用VS Code编写JavaScript 代码.............................................8
1.3.1 <script>标签.....................8
1.3.2 在HTML文件中嵌入JavaScript代码................8
1.3.3 JavaScript的外部引用......9
1.4 JavaScript运行环境.....................9
1.4.1 调试JavaScript代码......11
1.4.2 Chrome浏览器脚本........11
【商业案例】 学生信息管理系统——初始化项目.....................12
【综合实训】 安装与使用VS Code......14
【AI实验室】 在VS Code中安装并使用GitHub Copilot ..............14
【单元小结】........................................15
【课后练习】........................................15
【实战演练】 安装VS Code................15

单元2
JavaScript基础语法........16
【学习导读】........................................16
【学习目标】.......................................16
【思维导图】.......................................16
【相关知识】.......................................17
2.1 变量...........................................17
2.1.1 变量声明与赋值...............17
2.1.2 局部变量与全局变量........17
2.2 数据类型....................................17
2.2.1 基本数据类型..................18
2.2.2 引用数据类型..................20
2.2.3 基本数据类型值和引用数据类型值的区别...........24
2.2.4 数据类型转换..................25
2.3 运算符.......................................29
2.3.1 运算符类型.....................29
2.3.2 运算符优先级..................44
2.4 标识符及关键字..........................45
【商业案例】 学生信息管理系统——展示学生信息列表..................45
【综合实训】 用位运算符实现加减运算...............................52
【AI实验室】 使用GitHub Copilot辅助编写基础语法代码..........53
【单元小结】.......................................54
【课后练习】.......................................54
【实战演练】 数据类型转换..................54

单元3
JavaScript程序控制和函数................................55
【学习导读】.......................................55
【学习目标】.......................................55
【思维导图】.......................................55
【相关知识】.......................................56
3.1 程序控制流.................................56
3.1.1 if条件语句......................56
3.1.2 for循环语句....................57
3.1.3 for...in循环语句..............57
3.1.4 while循环语句................58
3.1.5 break和continue语句....58
3.1.6 do...while循环语句.........60
3.1.7 switch语句.....................60
3.2 JavaScript函数.........................61
3.2.1 函数定义.........................62
3.2.2 函数参数.........................62
3.2.3 函数返回值......................66
3.2.4 函数调用模式..................68
3.2.5 递归调用.........................70
3.2.6 作用域............................71
3.2.7 异常处理.........................72
3.2.8 闭包................................72
3.2.9 箭头函数.........................74
【商业案例】 学生信息管理系统——添加分页功能.........................75
【综合实训】 制作用户列表页面............77
【AI实验室】 使用GitHub Copilot辅助实现流程控制与函数编写....................78
【单元小结】........................................78
【课后练习】........................................78
【实战演练】 制作网站导航页...............79

单元4
JavaScript对象.............80
【学习导读】........................................80
【学习目标】........................................80
【思维导图】........................................81
【相关知识】........................................81
4.1 对象简介....................................81
4.1.1 访问对象的属性...............81
4.1.2 访问对象的方法...............82
4.1.3 创建JavaScript对象......82
4.1.4 创建对象实例并添加属性和方法............................83
4.1.5 JavaScript类.................83
4.2 Number对象.............................84
4.2.1 数字................................85
4.2.2 八进制和十六进制...........85
4.2.3 无穷大的值.....................85
4.2.4 非数值............................86
4.3 字符串对象.................................86
4.3.1 字符串长度.....................87
4.3.2 查找字符串.....................87
4.3.3 大小写转换.....................88
4.3.4 将字符串转换为数组........88
4.3.5 特殊字符.........................88
4.4 日期对象....................................89
4.4.1 创建日期对象..................89
4.4.2 获取日期对象..................89
4.4.3 设置日期对象..................90
4.4.4 日期比较.........................90
4.5 数组对象....................................91
4.5.1 创建数组.........................91
4.5.2 访问数组.........................91
4.5.3 数组属性和方法...............92
【商业案例】 学生信息管理系统——新增和修改学生信息..............92
【综合实训】 制作穿梭框功能组件......100
【AI实验室】 使用GitHub Copilot
快速生成对象、数组
与日期.........................101
【单元小结】.....................................102
【课后练习】.....................................102
【实战演练】 制作会动的时钟.............102

单元5
JavaScript DOM介绍..............................103
【学习导读】.....................................103
【学习目标】.....................................103
【思维导图】.....................................103
【相关知识】.....................................104
5.1 DOM简介...............................104
5.2 DOM元素...............................104
5.3 DOM事件...............................109
5.3.1 click事件......................109
5.3.2 load和unload事件......110
5.3.3 change事件.................110
5.3.4 mouseover和mouseout事件..............................111
5.3.5 mousedown和mouseup事件..............................112
5.4 DOM事件监听器......................112
5.4.1 添加事件监听器.............113
5.4.2 为元素添加多个事件监听器..........................113
5.4.3 事件冒泡与事件捕获......113
5.4.4 移除事件监听器.............114
【商业案例】 学生信息管理系统——查看和删除学生信息.............114
【综合实训】 制作待办事项列表..........118
【AI实验室】 使用GitHub Copilot辅助DOM操作与事件绑定....119
【单元小结】......................................119
【课后练习】......................................119
【实战演练】 开发搜索结果页面..........120

单元6
Vue.js概述...................121
【学习导读】......................................121
【学习目标】......................................121
【思维导图】......................................121
【相关知识】......................................122
6.1 Vue简介..................................122
6.1.1 使用Vue的优势...........122
6.1.2 Vue的特性...................122
6.1.3 Vue的版本...................123
6.2 搭建开发环境............................123
6.2.1 Node.js环境................124
6.2.2 常见的包管理工具..........125
6.2.3 安装VS Code扩展程序..............................127
6.3 创建Vue 3项目.......................128
6.3.1 Vite概述.......................128
6.3.2 创建Vue 3项目............128
6.3.3 Vue 3项目目录.............130
6.3.4 Vue 3项目的运行过程....131
【商业案例】 学生信息管理系统——初始化项目，完成页面布局.............................133
【综合实训】 学习计划表——初始化Vue 3环境，拆分组件....139
【AI实验室】 使用GitHub Copilot快速搭建Vue 3项目与组件.........................140
【单元小结】.....................................140
【课后练习】.....................................141
【实战演练】 创建并运行Vue 3项目....141

单元7
Vue 3模板与常用指令.....142
【学习导读】.....................................142
【学习目标】.....................................142
【思维导图】.....................................143
【相关知识】.....................................143
7.1 单文件组件...............................143
7.2 数据绑定..................................144
7.2.1 初识数据绑定................144
7.2.2 响应式数据绑定.............146
7.3 指令.........................................151
7.3.1 内容渲染指令................151
7.3.2 属性绑定指令................152
7.3.3 事件绑定指令................153
7.3.4 双向数据绑定指令.........154
7.3.5 条件渲染指令................156
7.3.6 列表渲染指令................159
7.4 事件对象..................................161
7.5 事件修饰符...............................164
【商业案例】 学生信息管理系统——构建学生信息列表，开发分页功能......................167
【综合实训】 学习计划表——搭建页面
布局，渲染列表............173
【AI实验室】 使用GitHub Copilot生成指令与数据绑定代码.....174
【单元小结】.....................................175
【课后练习】.....................................175
【实战演练】 实现水果信息列表页面.............................175

单元8
Vue 3属性....................176
【学习导读】......................................176
【学习目标】......................................176
【思维导图】......................................176
【相关知识】......................................177
8.1 计算属性..................................177
8.2 侦听器......................................178
8.2.1 侦听器简介....................178
8.2.2 侦听器的使用................179
8.3 样式绑定..................................179
8.3.1 绑定class属性.............180
8.3.2 绑定style属性..............184
【商业案例】 学生信息管理系统——新增和修改学生信息......187
【综合实训】 学习计划表——添加学习计划.............................193
【AI实验室】 使用GitHub Copilot编写Vue 3属性相关代码.....194
【单元小结】......................................194
【课后练习】......................................195
【实战演练】 制作简易计算器.............195

单元9
Vue 3组件....................196
【学习导读】......................................196
【学习目标】......................................196
【思维导图】......................................197
【相关知识】......................................197
9.1 选项式API和组合式API ..........197
9.2 生命周期函数...........................200
9.2.1 组合式API下的生命周期
函数.............................200
9.2.2 选项式API下的生命周期函数.............................202
9.3 组件的注册和引用.....................203
9.3.1 注册组件.......................203
9.3.2 引用组件.......................204
9.4 解决组件之间的样式冲突问题....206
9.4.1 scoped属性.................207
9.4.2 深度选择器...................207
9.5 父组件向子组件传递数据...........208
9.5.1 声明props...................208
9.5.2 静态绑定props.............209
9.5.3 动态绑定props.............210
9.5.4 验证props...................212
9.6 子组件向父组件传递数据...........214
9.6.1 在子组件中声明自定义事件.............................214
9.6.2 在子组件中触发自定义事件.............................214
9.6.3 在父组件中监听自定义事件.............................215
9.7 跨级组件之间的数据传递...........216
【商业案例】 学生信息管理系统——查看和删除学生信息............220
【综合实训】 学习计划表——修改完成状态和删除学习计划......225
【AI实验室】 使用GitHub Copilot完成Vue3组件生成与事件通信..................226
【单元小结】.....................................226
【课后练习】.....................................226
【实战演练】 实现父、子组件之间的数据传递......................228