目    录

第 1 章  准备知识 1

1.1  前端技术简介 2

1.2  HTML入门 3

1.2.1  准备开发工具 3

1.2.2  HTML中的基础标签 5

1.3  CSS入门 8

1.3.1  CSS选择器入门 8

1.3.2  CSS样式入门 11

1.4  JavaScript入门 14

1.4.1  我们为什么需要JavaScript 15

1.4.2  JavaScript语法简介 16

1.4.3  从JavaScript到TypeScript 19

1.5  渐进式开发框架Vue 19

1.5.1  第一个Vue应用 20

1.5.2  范例：一个简单的用户登录页面 21

1.5.3  Vue 3的新特性 23

1.5.4  我们为什么要使用Vue框架 24

1.6  本章小结 25

第 2 章  TypeScript基础 26

2.1  重新认识TypeScript 26

2.1.1  安装TypeScript 27

2.1.2  TypeScript语言版本的HelloWorld程序 28

2.1.3  使用高级IDE工具 29

2.2  TypeScript中的基本类型 31

2.2.1  布尔、数值与字符串 31

2.2.2  特殊的空值类型 33

2.2.3  数组与元组 34

2.3  TypeScript中有关类型的高级内容 35

2.3.1  枚举类型 35

2.3.2  枚举的编译原理 38

2.3.3  any、never与object类型 39

2.3.4  关于类型断言 40

2.4  函数的声明和定义 41

2.4.1  函数的类型 41

2.4.2  可选参数、默认参数和不定个数参数 42

2.4.3  函数的重载 44

2.5  本章小结 45

第 3 章  TypeScript中的面向对象编程 48

3.1  理解与应用“类” 48

3.1.1  类的定义与继承 48

3.1.2  类的访问权限控制 51

3.1.3  只读属性与存取器 53

3.1.4  关于静态属性与抽象类 55

3.1.5  类的实现原理 57

3.2  接口的应用 58

3.2.1  接口的定义 59

3.2.2  使用接口约定函数和可索引类型 60

3.2.3  使用接口来约束类 62

3.2.4  接口的继承 64

3.3  TypeScript中的类型推断与高级类型 65

3.3.1  关于类型推断 65

3.3.2  联合类型与交叉类型 67

3.3.3  TypeScript的类型区分能力 68

3.3.4  字面量类型与类型别名 70

3.4  本章小结 71

第 4 章  TypeScript编程进阶 73

4.1  使用泛型进行编程 73

4.1.1  泛型的简单使用 73

4.1.2  在类和接口中使用泛型 75

4.1.3  对泛型进行约束 77

4.2  迭代器与装饰器 78

4.2.1  关于迭代器 79

4.2.2  关于装饰器 80

4.2.3  装饰器的组合与装饰器工厂 83

4.3  命名空间与模块 84

4.3.1  命名空间的应用 84

4.3.2  使用模块 86

4.4  本章小结 87

第 5 章  Vue中的模板 88

5.1  模板基础 88

5.1.1  模板插值 89

5.1.2  模板指令 91

5.2  条件渲染 93

5.2.1  使用v-if指令进行条件渲染 93

5.2.2  使用v-show指令进行条件渲染 96

5.3  循环渲染 97

5.3.1  v-for指令的使用方法 97

5.3.2  v-for指令的高级用法 100

5.4  范例：待办任务列表 101

5.4.1  使用HTML搭建应用框架结构 101

5.4.2  实现待办任务列表逻辑 102

5.5  本章小结 104

第 6 章  Vue组件的属性和方法 105

6.1  属性与方法基础 105

6.1.1  属性基础 106

6.1.2  方法基础 106

6.2  计算属性和侦听器 107

6.2.1  计算属性 107

6.2.2  使用计算属或函数 108

6.2.3  计算属性的赋值 109

6.2.4  属性侦听器 110

6.3  进行函数限流 111

6.3.1  手动实现一个简易的限流函数 112

6.3.2  使用Lodash库进行函数限流 113

6.4  表单数据的双向绑定 114

6.4.1  文本输入框 114

6.4.2  多行文本输入区域 115

6.4.3  复选框与单选框 115

6.4.4  选择列表 116

6.4.5  两个常用的修饰符 117

6.5  样式绑定 117

6.5.1  为HTML标签绑定class属性 117

6.5.2  绑定内联样式 119

6.6  范例：用户注册页面 120

6.6.1  搭建用户注册页面 120

6.6.2  实现注册页面的用户交互 123

6.7  本章小结 125

第 7 章  处理用户交互 127

7.1  事件的监听与处理 127

7.1.1  事件监听示例 128

7.1.2  多事件处理 129

7.1.3  事件修饰符 130

7.2  Vue中的事件类型 132

7.2.1  常用的事件类型 132

7.2.2  按键修饰符 134

7.3  实战一：随鼠标移动的小球 135

7.4  实战二：弹球游戏 138

7.5  本章小结 141

第 8 章  组件基础 142

8.1  关于Vue应用与组件 142

8.1.1  Vue应用的数据配置选项 143

8.1.2  定义组件 144

8.2  组件中数据与事件的传递 146

8.2.1  为组件添加外部属性 146

8.2.2  处理组件事件 147

8.2.3  在组件上使用v-model指令 149

8.3  自定义组件的插槽 151

8.3.1  组件插槽的基本用法 151

8.3.2  多具名插槽的用法 153

8.4  动态组件的简单应用 154

8.5  实战：开发一款小巧的开关按钮组件 156

8.6  本章小结 159

第 9 章  组件进阶 160

9.1  组件的生命周期与高级配置 160

9.1.1  生命周期方法 161

9.1.2  应用的全局配置选项 164

9.1.3  组件的注册方式 165

9.2  组件props属性的高级用法 166

9.2.1  对props属性进行验证 166

9.2.2  props的只读性质 169

9.2.3  组件数据注入 170

9.3  组件Mixin技术 173

9.3.1  使用Mixin来定义组件 173

9.3.2  Mixin选项的合并 175

9.3.3  进行全局Mixin 176

9.4  使用自定义指令 177

9.4.1  认识自定义指令 177

9.4.2  自定义指令的参数 178

9.5  组件的Teleport功能 179

9.6  本章小结 181

第 10 章  Vue响应性编程 183

10.1  响应性编程原理与在Vue中的应用 183

10.1.1  手动追踪变量的变化 183

10.1.2  Vue中的响应性对象 186

10.1.3  独立的响应性值Ref的应用 187

10.2  响应式的计算与监听 189

10.2.1  关于计算变量 190

10.2.2  监听响应式变量 191

10.3  组合式API的应用 193

10.3.1  关于setup方法 194

10.3.2  在setup方法中定义生命周期行为 195

10.4  实战：支持搜索和筛选的用户列表示例 196

10.4.1  常规风格的示例工程开发 196

10.4.2  使用组合式API重构用户列表页面 200

10.5  本章小结 202

第 11 章  使用动画 204

11.1  使用CSS 3创建动画 204

11.1.1  transition过渡动画 204

11.1.2  keyframes动画 206

11.2  使用JavaScript的方式实现动画效果 208

11.3  Vue过渡动画 209

11.3.1  定义过渡动画 209

11.3.2  设置动画过程中的监听回调 213

11.3.3  多个组件的过渡动画 214

11.3.4  列表过渡动画 216

11.4  实战：优化用户列表页面 217

11.5  本章小结 219

第 12 章  Vue CLI工具的使用 220

12.1  Vue CLI工具入门 220

12.1.1  Vue CLI工具的安装 221

12.1.2  快速创建Vue项目 222

12.2  Vue CLI项目模板工程 224

12.2.1  模板工程的目录结构 224

12.2.2  运行Vue项目工程 230

12.2.3  vue-class-component库简介 231

12.3  在项目中使用依赖 232

12.4  工程构建 233

12.5  新一代前端构建工具Vite 234

12.5.1  Vite与Vue CLI 235

12.5.2  体验Vite构建工具 235

12.6  本章小结 237

第 13 章  Element Plus基于Vue 3的UI组件库 238

13.1  Element Plus入门 238

13.1.1  Element Plus的安装与使用 239

13.1.2  按钮组件 242

13.1.3  标签组件 244

13.1.4  空态图与加载占位图组件 246

13.1.5  图片与头像组件 249

13.2  表单类组件 251

13.2.1  单选框与多选框 251

13.2.2  标准输入框组件 253

13.2.3  带推荐列表的输入框组件 255

13.2.4  数字输入框 257

13.2.5  选择列表 257

13.2.6  多级列表组件 260

13.3  开关与滑块组件 263

13.3.1  开关组件 263

13.3.2  滑块组件 264

13.4  选择器组件 266

13.4.1  时间选择器 266

13.4.2  日期选择器 268

13.4.3  颜色选择器 269

13.5  提示类组件 270

13.5.1  警告组件 270

13.5.2  消息提示 271

13.5.3  通知组件 273

13.6  数据承载相关组件 274

13.6.1  表格组件 274

13.6.2  导航组件 277

13.6.3  标签页组件 279

13.6.4  抽屉组件 280

13.6.5  布局容器组件 281

13.7  实战：教务系统学生表 283

13.8  本章小结 287

第 14 章  基于Vue的网络框架vue-axios的应用 288

14.1  使用vue-axios请求天气数据 288

14.1.1  使用互联网上免费的数据服务 288

14.1.2  使用vue-axios进行数据请求 291

14.2  vue-axios实用功能介绍 293

14.2.1  通过配置的方式进行数据请求 293

14.2.2  请求的配置与响应数据结构 295

14.2.3  拦截器的使用 296

14.3  实战：天气预报应用 297

14.3.1  搭建页面框架 297

14.3.2  实现天气预报应用核心逻辑 299

14.4  本章小结 301

第 15 章  Vue路由管理 302

15.1  Vue Router的安装与简单使用 302

15.1.1  Vue Router的安装 303

15.1.2  一个简单的Vue Router的使用示例 303

15.2  带参数的动态路由 305

15.2.1  路由参数匹配 305

15.2.2  路由匹配的语法规则 307

15.2.3  路由的嵌套 309

15.3  页面导航 310

15.3.1  使用路由方法 310

15.3.2  导航历史控制 312

15.4  关于路由的命名 312

15.4.1  使用名称进行路由切换 313

15.4.2  路由视图命名 313

15.4.3  使用别名 314

15.4.4  路由重定向 315

15.5  关于路由传参 316

15.6  路由导航守卫 317

15.6.1  定义全局的导航守卫 317

15.6.2  为特定的路由注册导航守卫 318

15.7  动态路由 320

15.8  本章小结 322

第 16 章  Vue状态管理 323

16.1  认识Vuex框架 323

16.1.1  关于状态管理 323

16.1.2  安装与体验Vuex 325

16.2  Vuex中的一些核心概念 328

16.2.1  Vuex中的状态state 328

16.2.2  Vuex中的Getter方法 329

16.2.3  Vuex中的Mutation 331

16.2.4  Vuex中的Action 332

16.2.5  Vuex中的Module 333

16.3  本章小结 337

第 17 章  实战：编程技术论坛系统开发 338

17.1  项目搭建 338

17.1.1  前端项目搭建 338

17.1.2  后端项目搭建 340

17.2  登录注册模块 341

17.2.1  SQLite数据库的应用 341

17.2.2  用户登录注册服务接口实现 344

17.2.3  前端登录注册页面搭建 348

17.2.4  前端登录注册逻辑实现 356

17.3  帖子列表模块的开发 358

17.3.1  类别与帖子数据库表的设计 358

17.3.2  类别列表与帖子列表接口开发 360

17.3.3  前端首页帖子列表模块开发 364

17.4  帖子发布模块开发 370

17.4.1  新增创建帖子的后端服务接口 370

17.4.2  前端发布页面入口添加 372

17.4.3  前端发布帖子页面开发 374

17.4.4  完善帖子发布模块 377

17.5  帖子详情模块开发 379

17.5.1  帖子详情模块后端接口开发 380

17.5.2  前端帖子详情模块开发 382

17.6  评论与回复模块开发 388

17.6.1  评论数据库表的设计与接口逻辑编写 388

17.6.2  前端帖子详情页评论数据展示 394

17.6.3  前端发布评论功能开发 398

17.7  搜索模块与退出登录逻辑开发 400

17.8  本章小结 408