循序渐进Vue.js 3前端开发实战

第1章 从前端基础到Vue.js 3 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 14

1.4.2 JavaScript语法简介 16

1.5 渐进式开发框架Vue 18

1.5.1 **个Vue应用 18

1.5.2 范例：实现一个简单的用户登录页面 19

1.5.3 Vue 3的新特性 21

1.5.4 为什么要使用Vue框架 22

1.6 小结与练习 23

第2章 Vue模板应用 24

2.1 模板基础 25

2.1.1 模板插值 25

2.1.2 模板指令 28

2.2 条 件 渲 染 29

2.2.1 使用v-if指令进行条件渲染 30

2.2.2 使用v-show指令进行条件渲染 32

2.3 循 环 渲 染 33

2.3.1 v-for指令的使用方法 33

2.3.2 v-for指令的高级用法 36

2.4 范例：实现待办任务列表应用 37

2.4.1 步骤一：使用HTML搭建应用框架结构 37

2.4.2 步骤二：实现待办任务列表的逻辑开发 38

2.5 小结与练习 40

第3章 Vue组件的属性和方法 41

3.1 属性与方法基础 41

3.1.1 属性基础 42

3.1.2 方法基础 42

3.2 计算属性和侦听器 43

3.2.1 计算属性 43

3.2.2 使用计算属性还是函数 44

3.2.3 计算属性的赋值 45

3.2.4 属性侦听器 46

3.3 进行函数限流 47

3.3.1 手动实现一个简易的限流函数 48

3.3.2 使用Lodash库进行函数限流 49

3.4 表单数据的双向绑定 50

3.4.1 文本输入框 50

3.4.2 多行文本输入区域 51

3.4.3 复选框与单选框 51

3.4.4 选择列表 52

3.4.5 两个常用的修饰符 53

3.5 样 式 绑 定 53

3.5.1 为HTML标签绑定Class属性 53

3.5.2 绑定内联样式 55

3.6 范例：实现一个功能完整的用户注册页面 56

3.6.1 步骤一：搭建用户注册页面 56

3.6.2 步骤二：实现注册页面的用户交互 59

3.7 小结与练习 61

第4章 处理用户交互 63

4.1 事件的监听与处理 63

4.1.1 事件监听示例 63

4.1.2 多事件处理 65

4.1.3 事件修饰符 65

4.2 Vue中的事件类型 68

4.2.1 常用事件类型 68

4.2.2 按键修饰符 70

4.3 范例1：随鼠标移动的小球 72

4.4 范例2：弹球游戏 74

4.5 小结与练习 77

第5章 组件基础 78

5.1 关于Vue应用与组件 78

5.1.1 Vue应用的数据配置选项 79

5.1.2 定义组件 80

5.2 组件中的数据与事件的传递 81

5.2.1 为组件添加外部属性 82

5.2.2 处理组件事件 83

5.2.3 在组件上使用v-model指令 84

5.3 自定义组件的插槽 86

5.3.1 组件插槽的基本用法 87

5.3.2 多具名插槽的用法 88

5.4 动态组件的简单应用 90

5.5 范例：开发一款小巧的开关按钮组件 91

5.6 小结与练习 94

第6章 组件进阶 95

6.1 组件的生命周期与高级配置 95

6.1.1 生命周期方法 96

6.1.2 应用的全局配置选项 99

6.1.3 组件的注册方式 100

6.2 组件Props属性的高级用法 101

6.2.1 对Prop属性进行验证 101

6.2.2 Props的只读性质 104

6.2.3 组件数据注入 105

6.3 组件Mixin技术 108

6.3.1 使用Mixin来定义组件 108

6.3.2 Mixin选项的合并 110

6.3.3 进行全局Mixin 111

6.4 使用自定义指令 111

6.4.1 认识自定义指令 112

6.4.2 自定义指令的参数 113

6.5 使用组件的Teleport功能开发全局弹窗 113

6.6 小结与练习 116

第7章 Vue响应式编程 117

7.1 响应式编程的原理及在Vue中的应用 117

7.1.1 手动追踪变量的变化 118

7.1.2 Vue中的响应式对象 120

7.1.3 独立的响应式值Ref的应用 121

7.2 响应式的计算与监听 123

7.2.1 关于计算变量 124

7.2.2 监听响应式变量 125

7.3 组合式API的应用 127

7.3.1 关于setup方法 127

7.3.2 在setup方法中定义生命周期行为 129

7.4 范例：实现支持搜索和筛选的用户列表 130

7.4.1 常规风格的示例工程开发 130

7.4.2 使用组合式API重构用户列表页面 133

7.5 小结与练习 136

第8章 动画 137

8.1 使用CSS3创建动画 137

8.1.1 transition过渡动画 138

8.1.2 keyframes动画 139

8.2 使用JavaScript的方式实现动画效果 141

8.3 Vue过渡动画 142

8.3.1 定义过渡动画 142

8.3.2 设置动画过程中的监听回调 146

8.3.3 多个组件的过渡动画 147

8.3.4 列表过渡动画 149

8.4 范例：优化用户列表页面 150

8.5 小结与练习 152

第9章 构建工具Vue CLI的使用 153

9.1 Vue CLI工具入门 153

9.1.1 Vue CLI的安装 154

9.1.2 快速创建项目 155

9.2 Vue CLI项目模板工程 157

9.2.1 模板工程的目录结构 157

9.2.2 运行Vue项目工程 161

9.3 在项目中使用依赖 162

9.4 工程构建 164

9.5 新一代前端构建工具Vite 165

9.5.1 Vite与Vue CLI的比较 165

9.5.2 体验Vite构建工具 165

9.6 小结与练习 167

第10章 基于Vue 3的UI组件库——Element Plus 168

10.1 Element Plus入门 168

10.1.1 Element Plus的安装与使用 169

10.1.2 按钮组件 171

10.1.3 标签组件 173

10.1.4 空态图与加载占位图组件 176

10.1.5 图片与头像组件 179

10.2 表单类组件 180

10.2.1 单选框与复选框 181

10.2.2 标准输入框组件 182

10.2.3 带推荐列表的输入框组件 184

10.2.4 数字输入框 186

10.2.5 选择列表 187

10.2.6 多级列表组件 190

10.3 开关与滑块组件 193

10.3.1 开关组件 193

10.3.2 滑块组件 194

10.4 选择器组件 196

10.4.1 时间选择器 197

10.4.2 日期选择器 198

10.4.3 颜色选择器 200

10.5 提示类组件 201

10.5.1 警告组件 201

10.5.2 消息提示 202

10.5.3 通知组件 204

10.6 数据承载相关组件 205

10.6.1 表格组件 205

10.6.2 导航菜单组件 208

10.6.3 标签页组件 210

10.6.4 抽屉组件 211

10.6.5 布局容器组件 212

10.7 实战：实现一个教务系统学生列表页面 214

10.8 小结与练习 217

第11章 基于Vue的网络框架——vue-axios的应用 219

11.1 使用vue-axios请求天气数据 219

11.1.1 使用互联网上免费的数据服务 219

11.1.2 使用vue-axios进行数据请求 222

11.2 vue-axios实用功能介绍 224

11.2.1 通过配置的方式进行数据请求 224

11.2.2 请求的配置与响应数据结构 225

11.2.3 拦截器的使用 226

11.3 范例：实现一个天气预报应用 227

11.3.1 搭建页面框架 227

11.3.2 实现天气预报应用的核心逻辑 229

11.4 小结与练习 231

第12章 Vue路由管理 232

12.1 Vue Router的安装与简单使用 232

12.1.1 Vue Router的安装 233

12.1.2 一个简单的Vue Router使用示例 233

12.2 带参数的动态路由 235

12.2.1 路由参数匹配 235

12.2.2 路由匹配的语法规则 237

12.2.3 路由的嵌套 239

12.3 页面导航 240

12.3.1 使用路由方法 240

12.3.2 导航历史控制 242

12.4 关于路由的命名 242

12.4.1 使用名称进行路由切换 243

12.4.2 路由视图命名 243

12.4.3 使用别名 245

12.4.4 路由重定向 245

12.5 关于路由传参 246

12.6 路由导航守卫 247

12.6.1 定义全局的导航守卫 248

12.6.2 为特定的路由注册导航守卫 249

12.7 动态路由 250

12.8 小结与练习 252

第13章 Vue状态管理 253

13.1 认识Vuex框架 253

13.1.1 关于状态管理 254

13.1.2 安装与体验Vuex 255

13.2 Vuex中的一些核心概念 258

13.2.1 Vuex中的状态state 258

13.2.2 Vuex中的Getter方法 260

13.2.3 Vuex中的Mutation 261

13.2.4 Vuex中的Action 262

13.2.5 Vuex中的Module 263

13.3 小结与练习 266

第14章 项目演练一：开发一个文档学习网站 267

14.1 网站框架的搭建 267

14.2 配置专题与文章目录 272

14.3 渲染文章笔记内容 274

14.4 小结与练习 278

第15章 项目演练二：电商后台管理系统实战 279

15.1 用户登录模块开发 279

15.1.1 项目搭建 279

15.1.2 用户登录页面的开发 282

15.2 项目主页搭建 285

15.2.1 主页框架搭建 285

15.2.2 完善注销功能 288

15.3 订单管理模块的开发 289

15.3.1 使用Mock.js进行模拟数据的生成 289

15.3.2 编写工具类与全局样式 290

15.3.3 完善订单管理页面 291

15.4 商品管理模块的开发 297

15.4.1 商品管理列表页的开发 297

15.4.2 新建商品的基础配置 302

15.4.3 新建商品的价格和库存配置 305

15.4.4 新建商品的详情设置 308

15.4.5 添加商品分类 310

15.5 店长管理模块的开发 312

15.5.1 店长列表的开发 312

15.5.2 店长审批列表与店长订单 315

15.6 财务管理与数据统计功能模块开发 316

15.6.1 交易明细与财务对账单 316

15.6.2 数据统计模块的开发 317

15.7 小结与练习 322