随着互联网技术的快速发展,JavaScript语言及其相关技术越来越受到人们的关注,各种各样的JavaScript框架层出不穷。Vue.js作为新一代JavaScript框架的优秀代表,为广大前端开发人员提供了许多便利,在Web前端开发领域占据着重要位置。本书以Vue.js 3为蓝本,详细地讲述了Vue.js框架的相关技术。本书分为10章,内容包括:Vue.js使用基础,创建Vue应用,Vue模板应用,Vue事件处理,Vue表单绑定,Vue组件应用,Vue组合式API,Vue路由管理,Vue网络请求,Vue状态管理。本书坚持就业与升学并重、以能力为本位的原则,突出实用性、适用性和先进性,结构合理、论述准确、内容翔实,注意知识的层次性和技能培养的渐进性,遵循难点分散的原则合理安排各章的内容,降低学生的学习难度,通过丰富的实战演练来引导学习者学习,旨在培养他们的实践动手能力和创新精神。每个项目后面均配项目思考和项目实训。
个人简介:赵增敏,教授,为河南省教育厅学科带头人,河南省教育厅学术带头人,长期从事数据库应用开发(Access/SQL Server/MySQL)、可视化编程(VB/VB.NET/C#)、网页设计、移动网页设计、动态网站开发(ASP/PHP/JSP/ASP.NET)、Web前端开发((jQuery/Bootstrap/AngularJS/Vue.js))等方面的教学与研究,有丰富的计算机教学经验和教材开发编写经验,迄今为止撰写了数十种计算机专著及教材,其中有多本国家级规划教材,还有版权输出到台湾出版繁体中文版,被电子工业出版社授予优秀作者称号。
目录
第1章 Vue.js使用基础 1
1.1 Vue简介 1
1.1.1 前端技术的发展 1
1.1.2 什么是Vue 2
1.1.3 Vue的优势 3
1.1.4 Vue 3的新特性 4
1.2 配置Vue开发环境 4
1.2.1 常用集成开发环境 4
1.2.2 Node.js环境 6
1.2.3 npm包管理工具 7
1.2.4 Vue Devtools扩展 9
1.3 Vue的简单使用 10
1.3.1 通过CDN使用Vue 10
1.3.2 构建Vue项目 16
1.3.3 两种API风格 18
习题1 22
第2章 Vue应用创建 24
2.1 应用的创建和配置 24
2.1.1 创建应用实例 24
2.1.2 挂载应用 29
2.1.3 应用配置 31
2.1.4 多个应用实例 33
2.2 响应式基础 35
2.2.1 数据属性 35
2.2.2 组件方法 37
2.2.3 计算属性 39
2.2.4 监听器 43
2.3 生命周期 52
2.3.1 生命周期概述 52
2.3.2 组件实例创建 54
2.3.3 组件实例挂载 55
2.3.4 状态更新 57
2.3.5 组件实例卸载 59
习题2 61
第3章 Vue模板应用 63
3.1 模板基础 63
3.1.1 文本插值 63
3.1.2 插入HTML代码 65
3.1.3 绑定HTML属性 67
3.1.4 使用JavaScript表达式 69
3.1.5 使用Vue指令 72
3.2 绑定类与样式 74
3.2.1 绑定样式类 75
3.2.2 绑定内联样式 80
3.3 条件渲染 83
3.3.1 使用v-if指令实现条件渲染 83
3.3.2 在template元素上使用v-if指令 85
3.3.3 使用v-show指令实现条件渲染 87
3.4 列表渲染 89
3.4.1 使用v-for指令遍历数组 89
3.4.2 使用v-for指令遍历对象 91
3.4.3 在v-for指令中使用范围值 93
3.4.4 在template元素上使用v-for指令 95
3.4.5 通过key属性管理状态 97
3.4.6 数组更新侦测 99
习题3 102
第4章 Vue事件处理 104
4.1 标准DOM事件模型 104
4.1.1 DOM事件模型 104
4.1.2 事件对象 107
4.2 监听事件 109
4.2.1 内联事件处理器 109
4.2.2 方法事件处理器 112
4.2.3 在内联事件处理器中调用方法 114
4.3 v-on指令修饰符 116
4.3.1 事件修饰符 116
4.3.2 按键修饰符 122
4.3.3 鼠标修饰符 125
习题4 125
第5章 Vue表单绑定 127
5.1 v-model指令的基本用法 127
5.1.1 绑定文本框 127
5.1.2 绑定多行文本域 129
5.1.3 绑定单选按钮 131
5.1.4 绑定复选框 133
5.1.5 绑定列表框 135
5.2 绑定动态值 138
5.2.1 单选按钮绑定动态值 138
5.2.2 复选框绑定动态值 140
5.2.3 列表框绑定动态值 141
5.3 使用修饰符 143
5.3.1 .lazy修饰符 143
5.3.2 .number修饰符 145
5.3.3 .trim修饰符 146
习题5 148
第6章 Vue组件应用 149
6.1 创建和使用组件 149
6.1.1 定义组件 149
6.1.2 注册组件 150
6.1.3 引用组件 152
6.2 向组件传递数据 156
6.2.1 声明props选项 156
6.2.2 传递prop的细节 160
6.2.3 单向数据流 164
6.2.4 props校验 166
6.2.5 布尔类型转换 170
6.3 处理组件事件 171
6.3.1 触发与监听事件 171
6.3.2 处理事件参数 174
6.3.3 声明事件 176
6.3.4 校验事件 177
6.4 组件双向绑定 178
6.4.1 在组件上使用v-model指令 178
6.4.2 设置v-model指令的参数 182
6.4.3 多个v-model指令绑定 184
6.4.4 创建v-model指令修饰符 186
6.5 透传属性 188
6.5.1 单根节点属性继承 188
6.5.2 多根节点属性继承 189
6.5.3 禁用属性继承 189
6.6 内容分发 190
6.6.1 单个插槽 190
6.6.2 具名插槽 192
6.6.3 作用域插槽 195
6.7 依赖注入 200
6.7.1 提供数据 200
6.7.2 注入数据 201
6.7.3 响应性链接 205
6.8 单文件组件 207
6.8.1 语法定义 207
6.8.2 单文件组件的优点 209
6.8.3 工具链 209
习题6 210
第7章 组合式API 212
7.1 setup钩子 212
7.1.1 基本用法 212
7.1.2 访问props选项 214
7.1.3 setup上下文对象 216
7.1.4 返回渲染函数 219
7.1.5 <script setup>语法糖 222
7.2 响应式API 224
7.2.1 响应式状态 224
7.2.2 计算属性 226
7.2.3 监听器 227
7.2.4 处理事件 232
7.2.5 使用组件 234
7.2.6 组件通信 236
7.2.7 暴露组件属性 239
7.3 生命周期钩子 241
7.3.1 生命周期钩子概述 242
7.3.2 组件实例挂载 242
7.3.3 状态更新 244
7.4 依赖注入 245
7.4.1 提供数据 246
7.4.2 注入数据 246
习题7 249
第8章 Vue路由管理 251
8.1 初识Vue Router 251
8.1.1 在HTML页面中使用Vue Router 251
8.1.2 在模块化开发中使用Vue Router 254
8.2 通过路由传递数据 257
8.2.1 路由对象 257
8.2.2 params传参 260
8.2.3 query传参 261
8.2.4 props传参 263
8.2.5 响应参数变化 265
8.3 路由匹配语法 268
8.3.1 使用正则表达式 268
8.3.2 设置可重复参数 269
8.3.3 设置可选参数 269
8.4 嵌套路由与命名路由 269
8.4.1 嵌套路由 270
8.4.2 命名路由 273
8.5 编程式导航 275
8.5.1 push()方法 275
8.5.2 replace()方法 276
8.5.3 go()方法 276
8.6 命名视图 279
8.6.1 基本用法 279
8.6.2 嵌套的命名视图 281
8.7 重定向和别名 283
8.7.1 路由重定向 284
8.7.2 设置路由别名 284
8.8 路由的历史模式 285
8.8.1 hash模式 285
8.8.2 HTML5模式 286
8.9 导航守卫 286
8.9.1 全局守卫 286
8.9.2 路由守卫 292
8.9.3 组件守卫 293
习题8 296
第9章 Vue网络请求 298
9.1 Axios基本用法 298
9.1.1 Axios简介 298
9.1.2 Axios开发环境搭建 300
9.1.3 GET请求 301
9.1.4 POST请求 304
9.1.5 并发请求 307
9.2 Axios API 309
9.2.1 Axios的使用方式 309
9.2.2 请求配置 313
9.2.3 响应结构 316
9.2.4 错误处理 318
9.2.5 默认配置 320
9.2.6 设置拦截器 321
习题9 324
第10章 Vue状态管理 326
10.1 Pinia使用基础 326
10.1.1 安装Pinia 326
10.1.2 基本用法 327
10.2 创建store 329
10.2.1 定义store 329
10.2.2 两种语法风格 330
10.2.3 使用store 331
10.3 管理state 333
10.3.1 定义state 333
10.3.2 更改state 335
10.3.3 订阅state 338
10.4 管理getter 341
10.4.1 定义getter 341
10.4.2 访问getter 343
10.4.3 向getter传递参数 345
10.5 管理action 347
10.5.1 定义action 347
10.5.2 订阅action 350
10.6 Pinia持久化存储 352
10.6.1 安装持久化插件 352
10.6.2 实现持久化存储 352
10.6.3 配置持久化存储 353
习题10 357