Vue.js 3+TypeScript完全指南
定价:¥159.00
作者: 王红元
出版时间:2025-08
出版社:电子工业出版社
- 电子工业出版社
- 9787121462764
- 1-5
- 512304
- 60266867-5
- 平塑勒
- 16开
- 2025-08
- 945
- 576
- 工学
- 计算机类
- 计算机科学与技术
- 本科 研究生及以上
内容简介
本书是一本全面、深入介绍Vue.js 3和TypeScript前端开发技术的图书。本书详细介绍了Vue.js 3的新特性与优势,包括模板语法、内置指令、Options API、组件化、过渡动画、Composition API、Vue Router、Vuex 等核心知识点;TypeScript 的基础和进阶知识,包括数据类型、类型别名、联合类型、类型断言、函数类型、类、接口、泛型、类型声明等内容。此外,本书还深入探讨了前端工程化、第三方库的集成与使用、企业级管理后台的实现和自动化部署等内容,以及如何从零开始实现一个Mini-Vue.js 3框架,以便读者深入理解Vue.js 3的核心原理。
目录
1 邂逅和初体验Vue.js 1
1.1 认识Vue.js 1
1.2 Vue.js与其他框架的对比 2
1.2.1 Vue.js、React和Angular三大框架对比 2
1.2.2 三大框架使用数据对比 2
1.3 Vue.js 2的缺点 4
1.4 Vue.js 3带来的新变化 4
1.5 搭建开发环境 6
1.5.1 VS Code的下载和安装 7
1.5.2 VS Code的基本配置 7
1.5.3 VS Code安装插件 9
1.6 Vue.js 3的安装和使用 10
1.6.1 使用CDN引入Vue.js 3 11
1.6.2 下载Vue.js 3源码并在本地引入 14
1.7 计数器案例 16
1.7.1 原生JavaScript实现计数器 16
1.7.2 用Vue.js 3实现计数器 17
1.7.3 MVVM架构模式 19
1.8 createApp的对象参数 20
1.8.1 template属性 20
1.8.2 data属性 22
1.8.3 methods属性 22
1.8.4 其他属性 24
1.9 VS Code生成代码片段 24
1.10 本章小结 27
2 模板语法和内置指令 28
2.1 插值语法 28
2.2 基本指令 30
2.2.1 v-once 30
2.2.2 v-text 31
2.2.3 v-html 32
2.2.4 v-pre 32
2.2.5 v-cloak 33
2.3 v-bind 34
2.3.1 绑定基本属性 34
2.3.2 绑定class属性 35
2.3.3 绑定style属性 38
2.3.4 动态绑定属性 40
2.3.5 绑定一个对象 41
2.4 v-on 42
2.4.1 绑定事件 42
2.4.2 事件对象和传递参数 44
2.4.3 修饰符 45
2.5 条件渲染 46
2.5.1 v-if和v-else 46
2.5.2 v-if和template结合使用 48
2.5.3 v-show 49
2.5.4 v-show和v-if的区别 50
2.6 列表渲染 51
2.6.1 v-for的基本使用 51
2.6.2 v-for支持的类型 52
2.6.3 v-for和template结合使用 54
2.6.4 数组的更新检测 55
2.7 key和diff算法 57
2.7.1 认识VNode和VDOM 57
2.7.2 key的作用和diff算法 59
2.7.3 没有key时的diff算法操作 60
2.7.4 有key时的diff算法操作 61
2.8 本章小结 64
3 Vue.js 3的Options API 65
3.1 计算属性 65
3.1.1 认识计算属性 65
3.1.2 计算属性的基本使用 66
3.1.3 计算属性和methods的区别 69
3.1.4 计算属性的setter和getter 71
3.2 监听器watch 73
3.2.1 watch的基本使用 73
3.2.2 watch配置选项 75
3.2.3 watch字符串、数组和API语法 78
3.2.4 watch深度监听 79
3.3 案例:书籍购物车 80
3.3.1 基本功能介绍 80
3.3.2 搭建基本功能 81
3.3.3 搭建书籍列表 83
3.3.4 搭建“加购物车”功能 84
3.3.5 优化价格和购买数量 86
3.3.6 完整代码展示 86
3.4 本章小结 88
4 v-model和表单输入 89
4.1 v-model的基本使用 89
4.2 v-model的实现原理 90
4.3 v-model绑定其他表单 91
4.4 v-model值的绑定 94
4.5 v-model的修饰符 94
4.5.1 .lazy修饰符 94
4.5.2 .number修饰符 94
4.5.3 .trim修饰符 96
4.6 v-model在组件上的使用 96
4.7 本章小结 96
5 Vue.js 3组件化开发 97
5.1 认识组件化 97
5.2 Vue.js 3的组件化 98
5.3 Vue.js 3注册组件 99
5.3.1 注册全局组件 99
5.3.2 组件的命名规范 102
5.3.3 注册局部组件 103
5.4 Vue.js 3开发模式 105
5.5 Vue.js 3支持SFC 106
5.6 本章小结 106
6 前端工程化 107
6.1 前端快速发展史 107
6.2 认识webpack 108
6.3 Vue CLI脚手架 109
6.3.1 认识Vue CLI 109
6.3.2 安装Node.js 109
6.3.3 安装Vue CLI 110
6.3.4 Vue CLI新建项目 111
6.3.5 Vue.js 3项目的目录结构 114
6.3.6 项目的运行和打包 115
6.3.7 vue.config.js文件解析 117
6.4 认识Vite 120
6.5 create-vue 脚手架 121
6.5.1 认识create-vue 121
6.5.2 create-vue新建项目 121
6.5.3 Vue.js 3项目目录结构 122
6.5.4 项目的运行和打包 123
6.5.5 vite.config.js文件解析 124
6.6 webpack和Vite的区别 126
6.7 本章小结 127
7 Vue.js 3组件化基础详解 128
7.1 组件的嵌套 130
7.1.1 搭建基本页面 130
7.1.2 组件的拆分和嵌套 131
7.1.3 组件CSS的作用域 134
7.1.4 组件之间的通信 135
7.2 组件样式的特性 135
7.2.1 Scoped CSS 135
7.2.2 CSS Modules 138
7.2.3 在CSS中使用v-bind 139
7.3 父子组件的相互通信 140
7.3.1 父组件传递数据给子组件 140
7.3.2 子组件传递数据给父组件 146
7.3.3 案例:选项卡TabControl实战 150
7.4 非父子组件的相互通信 153
7.4.1 Provide/Inject依赖注入 153
7.4.2 全局事件总线 159
7.5 组件中的插槽 162
7.5.1 认识插槽 162
7.5.2 插槽的使用 163
7.6 组件的作用域插槽 169
7.6.1 认识渲染作用域 169
7.6.2 作用域插槽 169
7.6.3 独占默认插槽 171
7.7 本章小结 172
8 Vue.js 3组件化进阶详解 173
8.1 动态组件 173
8.1.1 v-if指令的实现 174
8.1.2 动态组件的实现 175
8.1.3 动态组件的传参 176
8.1.4 keep-alive的使用 177
8.2 异步组件 180
8.2.1 webpack对代码分包 180
8.2.2 在Vue.js 3中实现异步组件 182
8.2.3 异步组件和
1.1 认识Vue.js 1
1.2 Vue.js与其他框架的对比 2
1.2.1 Vue.js、React和Angular三大框架对比 2
1.2.2 三大框架使用数据对比 2
1.3 Vue.js 2的缺点 4
1.4 Vue.js 3带来的新变化 4
1.5 搭建开发环境 6
1.5.1 VS Code的下载和安装 7
1.5.2 VS Code的基本配置 7
1.5.3 VS Code安装插件 9
1.6 Vue.js 3的安装和使用 10
1.6.1 使用CDN引入Vue.js 3 11
1.6.2 下载Vue.js 3源码并在本地引入 14
1.7 计数器案例 16
1.7.1 原生JavaScript实现计数器 16
1.7.2 用Vue.js 3实现计数器 17
1.7.3 MVVM架构模式 19
1.8 createApp的对象参数 20
1.8.1 template属性 20
1.8.2 data属性 22
1.8.3 methods属性 22
1.8.4 其他属性 24
1.9 VS Code生成代码片段 24
1.10 本章小结 27
2 模板语法和内置指令 28
2.1 插值语法 28
2.2 基本指令 30
2.2.1 v-once 30
2.2.2 v-text 31
2.2.3 v-html 32
2.2.4 v-pre 32
2.2.5 v-cloak 33
2.3 v-bind 34
2.3.1 绑定基本属性 34
2.3.2 绑定class属性 35
2.3.3 绑定style属性 38
2.3.4 动态绑定属性 40
2.3.5 绑定一个对象 41
2.4 v-on 42
2.4.1 绑定事件 42
2.4.2 事件对象和传递参数 44
2.4.3 修饰符 45
2.5 条件渲染 46
2.5.1 v-if和v-else 46
2.5.2 v-if和template结合使用 48
2.5.3 v-show 49
2.5.4 v-show和v-if的区别 50
2.6 列表渲染 51
2.6.1 v-for的基本使用 51
2.6.2 v-for支持的类型 52
2.6.3 v-for和template结合使用 54
2.6.4 数组的更新检测 55
2.7 key和diff算法 57
2.7.1 认识VNode和VDOM 57
2.7.2 key的作用和diff算法 59
2.7.3 没有key时的diff算法操作 60
2.7.4 有key时的diff算法操作 61
2.8 本章小结 64
3 Vue.js 3的Options API 65
3.1 计算属性 65
3.1.1 认识计算属性 65
3.1.2 计算属性的基本使用 66
3.1.3 计算属性和methods的区别 69
3.1.4 计算属性的setter和getter 71
3.2 监听器watch 73
3.2.1 watch的基本使用 73
3.2.2 watch配置选项 75
3.2.3 watch字符串、数组和API语法 78
3.2.4 watch深度监听 79
3.3 案例:书籍购物车 80
3.3.1 基本功能介绍 80
3.3.2 搭建基本功能 81
3.3.3 搭建书籍列表 83
3.3.4 搭建“加购物车”功能 84
3.3.5 优化价格和购买数量 86
3.3.6 完整代码展示 86
3.4 本章小结 88
4 v-model和表单输入 89
4.1 v-model的基本使用 89
4.2 v-model的实现原理 90
4.3 v-model绑定其他表单 91
4.4 v-model值的绑定 94
4.5 v-model的修饰符 94
4.5.1 .lazy修饰符 94
4.5.2 .number修饰符 94
4.5.3 .trim修饰符 96
4.6 v-model在组件上的使用 96
4.7 本章小结 96
5 Vue.js 3组件化开发 97
5.1 认识组件化 97
5.2 Vue.js 3的组件化 98
5.3 Vue.js 3注册组件 99
5.3.1 注册全局组件 99
5.3.2 组件的命名规范 102
5.3.3 注册局部组件 103
5.4 Vue.js 3开发模式 105
5.5 Vue.js 3支持SFC 106
5.6 本章小结 106
6 前端工程化 107
6.1 前端快速发展史 107
6.2 认识webpack 108
6.3 Vue CLI脚手架 109
6.3.1 认识Vue CLI 109
6.3.2 安装Node.js 109
6.3.3 安装Vue CLI 110
6.3.4 Vue CLI新建项目 111
6.3.5 Vue.js 3项目的目录结构 114
6.3.6 项目的运行和打包 115
6.3.7 vue.config.js文件解析 117
6.4 认识Vite 120
6.5 create-vue 脚手架 121
6.5.1 认识create-vue 121
6.5.2 create-vue新建项目 121
6.5.3 Vue.js 3项目目录结构 122
6.5.4 项目的运行和打包 123
6.5.5 vite.config.js文件解析 124
6.6 webpack和Vite的区别 126
6.7 本章小结 127
7 Vue.js 3组件化基础详解 128
7.1 组件的嵌套 130
7.1.1 搭建基本页面 130
7.1.2 组件的拆分和嵌套 131
7.1.3 组件CSS的作用域 134
7.1.4 组件之间的通信 135
7.2 组件样式的特性 135
7.2.1 Scoped CSS 135
7.2.2 CSS Modules 138
7.2.3 在CSS中使用v-bind 139
7.3 父子组件的相互通信 140
7.3.1 父组件传递数据给子组件 140
7.3.2 子组件传递数据给父组件 146
7.3.3 案例:选项卡TabControl实战 150
7.4 非父子组件的相互通信 153
7.4.1 Provide/Inject依赖注入 153
7.4.2 全局事件总线 159
7.5 组件中的插槽 162
7.5.1 认识插槽 162
7.5.2 插槽的使用 163
7.6 组件的作用域插槽 169
7.6.1 认识渲染作用域 169
7.6.2 作用域插槽 169
7.6.3 独占默认插槽 171
7.7 本章小结 172
8 Vue.js 3组件化进阶详解 173
8.1 动态组件 173
8.1.1 v-if指令的实现 174
8.1.2 动态组件的实现 175
8.1.3 动态组件的传参 176
8.1.4 keep-alive的使用 177
8.2 异步组件 180
8.2.1 webpack对代码分包 180
8.2.2 在Vue.js 3中实现异步组件 182
8.2.3 异步组件和











