Vue.js 3企业级应用开发实战

第1篇 初识Vue.js

第1章 理解Vue.js及产生的背景 /2

1.1 什么是Vue.js /2

1.2 Vue.js产生的背景 /2

1.2.1 Vue.js与jQuery的不同 /2

1.2.2 Vue.js与React、Angular的比较 /3

1.2.3 如何选择Angular、React和Vue.js /4

1.3 如何学习Vue.js /5

1.3.1 前置知识 /5

1.3.2 学习安排 /5

第2章 快速开启第一个Vue.js应用 /6

2.1 开发环境准备 /6

2.1.1 安装Node.js和NPM /6

2.1.2 设置NPM镜像 /7

2.1.3 选择合适的IDE /7

2.1.4 安装Vue CLI /8

2.1.5 检查和调试Vue.js应用的工具——Vue Devtools /8

2.2 创建Vue.js应用“hello-world” /8

2.2.1 利用Vue CLI初始化Vue.js应用“hello-world” /9

2.2.2 运行Vue.js应用“hello-world” /12

2.3 探索Vue.js应用 /13

2.3.1 整体项目结构 /13

2.3.2 项目根目录文件 /14

2.3.3 node_modules目录 /14

2.3.4 public目录 /14

2.3.5 src目录 /15

2.4 在Vue.js应用中使用TypeScript /19

2.4.1 基于“Vue 3 Preview”创建项目 /19

2.4.2 基于“Manually select features”创建项目 /20

2.4.3 TypeScript应用的差异 /22

第2篇 基础

第3章 TypeScript基础 /26

3.1 TypeScript概述 /26

3.1.1 TypeScript与JavaScript、ECMAScript的关系 /26

3.1.2 TypeScript与Vue.js的关系 /27

3.1.3 使用TypeScript的优势 /27

3.1.4 安装TypeScript /28

3.1.5 TypeScript代码的编译及运行 /28

3.2 变量与常量 /29

3.2.1 var、let、const三者的作用域 /29

3.2.2 变量与常量的区别 /29

3.2.3 变量提升 /30

3.3 TypeScript数据类型 /31

3.3.1 基本类型 /31

3.3.2 对象类型 /35

3.3.3 任意类型 /35

3.3.4 联合类型 /37

3.3.5 交集类型 /37

3.4 强大的面向对象体系 /38

3.4.1 类 /38

3.4.2 接口 /43

3.4.3 【实战】演示接口的使用 /43

3.4.4 泛型 /44

3.4.5 【实战】演示泛型的使用 /44

3.4.6 枚举 /45

3.5 TypeScript的命名空间 /46

3.5.1 声明命名空间 /46

3.5.2 【实战】声明命名空间 /46

3.5.3 命名空间体 /47

3.5.4 导入别名声明 /47

3.5.5 【实战】导入别名声明 /48

3.5.6 导出声明 /49

3.5.7 合并声明 /49

3.5.8 【实战】合并声明 /49

3.6 TypeScript 模块 /50

3.6.1 了解模块 /51

3.6.2 【实战】导入声明 /51

3.6.3 【实战】导入Require声明 /52

3.6.4 【实战】导出声明 /52

3.6.5 【实战】导出分配 /52

3.6.6 了解CommonJS模块 /53

3.6.7 了解AMD模式 /54

3.7 装饰器 /55

3.7.1 定义装饰器 /55

3.7.2 了解装饰器的执行时机 /56

3.7.3 认识4类装饰器 /57

第4章 Vue.js应用实例——一切的起点 /63

4.1 创建“应用实例” /63

4.1.1 第一个“应用实例” /63

4.1.2 让“应用实例”执行方法 /64

4.1.3 理解选项对象 /64

4.1.4 理解根组件 /65

4.1.5 理解MVVM模型 /66

4.2 data property与methods /66

4.2.1 理解data property /67

4.2.2 理解data methods /67

4.3 Vue.js的生命周期 /69

4.3.1 生命周期中的钩子函数 /69

4.3.2 生命周期的图示 /70

4.3.3 【实战】生命周期钩子函数的实例 /71

第5章 Vue.js组件——独立的程序单元 /76

5.1 组件的基本概念 /76

5.1.1 【实战】一个最简单的Vue.js组件的实例 /76

5.1.2 什么是组件 /78

5.1.3 【实战】一个子组件的复用实例 /79

5.1.4 Vue.js组件与Web组件的异同点 /80

5.2 组件的交互方式 /80

5.2.1 【实战】通过prop向子组件

传递数据 /80

5.2.2 【实战】监听子组件的事件 /81

5.2.3 【实战】兄弟组件之间的通信 /84

5.2.4 【实战】通过插槽分发内容 /87

5.3 让组件可以动态加载 /90

5.3.1 实现组件动态加载的步骤 /90

5.3.2 【实战】动态组件的实例 /90

5.4 使用<keep-alive>缓存组件 /96

5.4.1 【实战】<keep-alive>的例子 /97

5.4.2 <keep-alive>缓存组件的配置详解 /98

第6章 Vue.js模板——让内容随着模板中

变量的变化而变化 /101

6.1 了解Vue.js的模板 /101

6.2 【实战】在模板中使用插值 /102

6.2.1 文本 /102

6.2.2 原生HTML代码 /103

6.2.3 绑定HTML attribute /104

6.2.4 JavaScript表达式 /104

6.3 【实战】在模板中使用指令 /105

6.3.1 理解指令中的参数 /106

6.3.2 理解指令中的动态参数 /107

6.3.3 理解指令中的修饰符 /108

6.4 【实战】在模板中使用指令的缩写 /108

6.4.1 使用v-bind指令的缩写 /108

6.4.2 使用v-on指令的缩写 /109

6.5 使用模板的一些约定 /109

6.5.1 对动态参数值的约定 /109

6.5.2 对动态参数表达式的约定 /110

6.5.3 对访问全局变量的约定 /110

第7章 Vue.js计算属性与侦听器——处理响应式数据的复杂逻辑 /111

7.1 通过实例理解“计算属性”的必要性 /111

7.2 【实战】一个“计算属性”的实例 /112

7.2.1 声明“计算属性” /112

7.2.2 模拟数据更改 /114

7.3 “计算属性”缓存与方法的关系 /114

7.4 为什么需要侦听器 /115

7.4.1 理解侦听器 /115

7.4.2 【实战】一个侦听器的实例 /116

第8章 Vue.js样式——让应用变得好看 /119

8.1 绑定样式class /119

8.1.1 【实战】在class中绑定对象 /119

8.1.2 【实战】在class中绑定数组 /121

8.1.3 【实战】在组件上使用class /122

8.2 绑定内联样式 /122

8.2.1 【实战】在内联样式中绑定对象 /123

8.2.2 【实战】在内联样式中绑定数组 /124

8.2.3 【实战】在内联样式中绑定多重值 /124

第9章 Vue.js表达式——根据条件来渲染不同的内容 /126

9.1 条件表达式 /126

9.1.1 【实战】v-if指令的实例 /126

9.1.2 【实战】v-else指令的实例 /127

9.1.3 【实战】v-else-if指令的实例 /127

9.1.4 【实战】v-show指令的实例 /128

9.1.5 理解v-if指令与v-show指令的关系 /128

9.2 for循环表达式 /129

9.2.1 【实战】使用v-for指令遍历数组 /129

9.2.2 【实战】使用v-for指令遍历数组设置索引 /131

9.2.3 【实战】使用v-for指令遍历对象的property名称 /132

9.2.4 【实战】数组过滤 /135

9.2.5 【实战】使用值的范围 /136

9.3 v-for指令的不同使用场景 /137

9.3.1 【实战】在<template>中使用v-for指令 /137

9.3.2 【实战】v-for指令与v-if指令一起使用 /138

9.3.3 【实战】在组件上使用v-for指令 /139

第10章 Vue.js事件——通知做事的状态 /142

10.1 什么是事件 /142

10.1.1 【实战】一个简单的监听事件实例 /142

10.1.2 理解事件的处理方法 /143

10.1.3 处理原始的DOM事件 /144

10.1.4 为什么需要在HTML代码中监听事件 /145

10.2 【实战】多事件处理器的实例 /146

10.3 事件修饰符 /147

10.3.1 什么是事件修饰符 /147

10.3.2 按键修饰符 /149

10.3.3 系统修饰符 /149

第11章 Vue.js表单——采集用户输入的

数据 /151

11.1 理解“表单输入绑定” /151

11.2 【实战】“表单输入绑定”的基础

用法 /152

11.2.1 文本 /152

11.2.2 多行文本 /153

11.2.3 复选框 /153

11.2.4 单选按钮 /155

11.2.5 选择框 /156

11.3 【实战】对表单进行值绑定 /157

11.3.1 复选框 /157

11.3.2 单选按钮 /158

11.3.3 选择框 /160

11.4 【实战】表单修饰符的使用 /161

11.4.1 使用.lazy修饰符的实例 /162

11.4.2 使用.number修饰符的实例 /163

11.4.3 使用.trim修饰符的实例 /163

第3篇 进阶

第12章 深入组件 /166

12.1 什么是“组件注册” /166

12.1.1 理解“组件注册” /166

12.1.2 组件命名 /167

12.2 理解全局注册 /169

12.3 【实战】一个局部注册的实例 /170

12.4 【实战】一个模板引用的实例 /171

12.5 深入介绍prop（输入属性） /173

12.5.1 理解prop /173

12.5.2 prop类型 /174

12.5.3 【实战】传递动态prop /175

12.5.4 【实战】传递动态prop数字 /176

12.5.5 【实战】传递动态prop布尔值 /178

12.5.6 【实战】传递动态prop数组 /179

12.5.7 【实战】传递动态prop对象 /181

12.5.8 【实战】传递动态prop对象中的所有property /182

12.5.9 理解单向下行绑定 /185

12.5.10 【实战】prop类型验证 /186

12.6 理解非prop的attribute /189

12.6.1 【实战】attribute继承 /189

12.6.2 【实战】禁用attribute继承 /191

12.6.3 【实战】多个根节点上的attribute继承 /192

12.7 自定义事件 /195

12.7.1 如何给事件命名 /196

12.7.2 【实战】一个自定义事件的实例 /196

12.8 深入介绍插槽 /199

12.8.1 理解插槽内容 /199

12.8.2 了解渲染作用域 /200

12.8.3 【实战】后备内容（默认内容）的实例 /201

12.8.4 【实战】具名插槽（带名字的插槽）的实例 /204

12.8.5 了解具名插槽的缩写 /209

12.9 理解“依赖注入” /210

12.9.1 “依赖注入”的优点 /210

12.9.2 【实战】“依赖注入”的实例 /211

12.10 【实战】异步组件的实例 /215

第13章 深入样式 /217

13.1 过渡与动画的概述 /217

13.1.1 理解过渡与动画 /217

13.1.2 【实战】基于class的动画 /219

13.1.3 【实战】与style绑定的过渡 /222

13.2 考虑性能 /224

13.2.1 避免触发重绘 /224

13.2.2 利用硬件加速 /226

13.3 持续时间（timing） /226

13.3.1 理解timing /226

13.3.2 持续时间的使用原则 /226

13.4 缓慢的运动（easing） /227

13.4.1 理解缓慢的运动 /227

13.4.2 【实战】缓慢的运动的实例 /227

13.5 过渡 /228

13.5.1 理解过渡 /228

13.5.2 过渡class /231

13.5.3 【实战】自定义过渡class /232

13.5.4 同时使用过渡和动画 /233

13.5.5 显性的过渡持续时间 /233

13.6 列表过渡 /234

13.6.1 理解列表过渡 /234

13.6.2 【实战】列表过渡的实例 /234

第14章 组件的复用与组合 /237

14.1 理解混入 /237

14.1.1 【实战】基本的混入实例 /237

14.1.2 【实战】混入时的选项合并 /239

14.2 自定义指令 /240

14.2.1 【实战】自定义指令的实例 /241

14.2.2 了解指令的钩子函数 /242

14.2.3 【实战】指令绑定动态参数 /242

14.2.4 【实战】指令绑定对象

字面量 /243

14.3 理解传入 /244

14.3.1 【实战】传入的基本实例 /245

14.3.2 【实战】<teleport>与组件一起使用的实例 /247

14.3.3 【实战】在同一个目标元素上使用多个传入 /249

第15章 渲染函数 /251

15.1 理解渲染函数 /251

15.1.1 【实战】使用渲染函数render()

的实例 /251

15.1.2 DOM树 /254

15.1.3 虚拟DOM树 /255

15.2 h()函数 /256

15.2.1 h()函数的参数 /256

15.2.2 【实战】使用h()函数生成子代VNode /256

15.2.3 VNode必须唯一 /258

15.3 使用JavaScript代替模板功能 /259

15.3.1 【实战】代替v-if指令和v-for

指令的实例 /259

15.3.2 【实战】代替v-model指令的

实例 /261

15.3.3 【实战】代替v-on指令的

实例 /262

15.3.4 代替插槽 /262

15.4 模板编译 /263

第16章 测试 /264

16.1 测试概述 /264

16.1.1 传统的测试技术所面临的问题 /264

16.1.2 如何破解测试技术面临的问题 /266

16.1.3 测试类型 /267

16.2 单元测试 /269

16.2.1 理解单元测试 /269

16.2.2 单元测试常用框架 /270

16.2.3 【实战】Mocha单元测试的实例 /270

16.3 组件测试 /274

16.3.1 理解组件测试 /274

16.3.2 组件测试常用框架 /274

16.4 端到端测试 /275

16.4.1 理解端到端测试 /275

16.4.2 端到端测试常用框架 /276

第17章 响应式编程——以声明式的方式去适应变化 /277

17.1 响应式概述 /277

17.1.1 什么是响应式 /277

17.1.2 如何追踪变化 /278

17.1.3 了解Proxy对象 /278

17.1.4 了解侦听器实例 /279

17.2 理解Vue.js响应式编程的原理 /279

17.2.1 声明响应式状态 /279

17.2.2 【实战】ref()方法的使用 /280

17.2.3 响应式状态解构 /282

17.2.4 防止更改响应式对象 /283

17.3 理解响应式计算 /283

17.4 响应式侦听 /284

17.4.1 watchEffect()方法与watch()方法的异同点 /285

17.4.2 【实战】使用watchEffect()方法侦听变化 /285

17.4.3 【实战】停止使用watchEffect()方法侦听 /286

17.4.4 【实战】使用watch()方法侦听多个数据源 /288

17.4.5 【实战】使用watch()方法侦听响应式对象 /290

第18章 路由——实现网页之间的跳转 /292

18.1 路由的概念 /292

18.1.1 链接的类型 /292

18.1.2 什么是路由 /293

18.1.3 路由的核心概念 /293

18.1.4 静态路由和动态路由 /293

18.2 【实战】创建静态路由 /293

18.2.1 安装Vue Router库 /294

18.2.2 创建待路由的子组件 /294

18.2.3 创建路由 /295

18.2.4 了解路由参数history的两种模式 /296

18.2.5 使用路由 /296

18.2.6 运行应用 /298

18.3 【实战】创建动态路由 /299

18.3.1 什么是动态路由 /300

18.3.2 初始化应用 /300

18.3.3 创建待路由的子组件 /300

18.3.4 创建路由 /301

18.3.5 使用路由 /302

18.3.6 运行应用 /304

第4篇 项目实战

第19章 创建“新闻头条”客户端 /308

19.1 应用概述 /308

19.2 需求分析 /308

19.2.1 首页的需求分析 /308

19.2.2 新闻详情页面的需求分析 /309

19.3 架构设计 /310

19.3.1 获取访问API的密钥 /311

19.3.2 了解新闻列表API /312

19.3.3 了解新闻详情API /314

19.4 【实战】初始化“新闻头条”

客户端应用 /316

19.4.1 修改HelloWorld.vue子组件 /317

19.4.2 修改App.vue根组件 /317

19.4.3 运行应用 /318

第20章 实现“新闻头条”客户端首页 /319

20.1 首页概述 /319

20.2 需求分析 /320

20.3 架构设计 /320

20.4 【实战】实现“新闻头条”

客户端首页 /321

20.4.1 添加Naive UI /321

20.4.2 创建组件 /322

20.4.3 实现界面原型 /322

20.4.4 查看完整的首页原型效果 /327

第21章 实现“新闻头条”客户端导航栏 /329

21.1 导航栏概述 /329

21.2 导航栏的需求分析 /329

21.3 导航栏的架构设计 /330

21.4 【实战】实现“新闻头条”客户端的分类查询 /330

21.4.1 新建新闻分类服务 /330

21.4.2 解析新闻分类API数据 /330

21.4.3 展示新闻分类 /331

21.5 【实战】实现“新闻头条”客户端的新闻列表 /333

21.5.1 引入HTTP客户端 /333

21.5.2 解析新闻列表API数据 /334

21.5.3 解决跨域问题 /335

21.5.4 固定导航栏 /336

21.6 【实战】实现导航栏与新闻列表组件通信 /338

21.6.1 监听导航栏的单击事件 /338

21.6.2 自定义导航栏的切换事件 /340

21.6.3 处理导航栏的单击事件 /341

21.6.4 运行应用 /344

第22章 实现“新闻头条”客户端的新闻详情页面 /345

22.1 新闻详情页面的概述 /345

22.2 新闻详情页面的需求分析 /345

22.3 新闻详情页面的架构设计 /346

22.4 【实战】实现“新闻头条”客户端的新闻详情页面 /347

22.4.1 创建“新闻头条”客户端的新闻详情组件 /347

22.4.2 修改“新闻头条”客户端的新闻列表组件 /349

22.4.3 配置路由 /349

22.4.4 运行应用 /351

参考文献 /352

......(更多)