Vue.js开发快速入门到精通

《Vue.js开发快速入门到精通》是一本侧重编程基础+实践的Vue.js程序开发图书，为了保证读者可以学以致用，在实践方面循序渐进地进行3个层次的实践：基础知识实践、进阶应用实践和综合应用实践。全面介绍了使用Vue.js进行程序开发的必备知识，从学习到实践的角度出发，以帮助读者快速掌握Vue.js开发的技能，拓宽职场的道路。本书通过各种示例将学习与应用相结合，通过案例对所学知识进行综合应用，通过开发实际项目将Vue.js开发的各项技能应用到实际工作中。
全书共20章，主要分为三个篇章：基础篇包括初识Vue.js、基础特性、条件判断、列表渲染、计算属性和监听属性、样式绑定、事件处理、表单控件绑定、自定义指令、组件、过渡效果、使用插件实现路由和Ajax、单页Web应用、状态管理；案例篇包括模拟QQ聊天窗口、贪吃蛇小游戏、注册与登录、时光音乐网首页设计、游戏公园；项目篇包括51购商城。
本书提供丰富的资源，包含实例、实战练习、案例、项目，力求为读者打造一本基础+应用+实践一体化精彩的Vue.js开发实例图书。
本书不仅适合初学者、编程爱好者、准备毕业设计的学生、参加实习的“菜鸟”程序员，而且适合初、中级程序开发人员以及程序测试和维护人员。

本书从初学者的角度出发，为想要学习Vue.js程序开发、想要进行前端开发的初中级开发人员、编程爱好者、大学师生精心策划。所讲内容从技术应用的角度出发，结合实际应用进行讲解。本书侧重Vue.js的编程基础与实践，为保证读者学以致用，循序渐进地进行3个层次的篇章介绍：基础篇、案例篇和项目篇。
本书内容
全书共分为20章，主要通过“基础篇（14章）+案例篇（5章）+项目篇（1章）”三大维度一体化的方式讲解，具体的学习结构如下图所示。
本书特色
1.突出重点、学以致用
书中每个知识点都结合了简单易懂的示例代码以及非常详细的注释信息，力求读者能够快速理解所学知识，提升学习效率，缩短学习路径。
2.提升思维、综合运用
本书会以知识点综合运用的方式，带领读者制作各种趣味性较强的应用案例，让读者不断提升编写Vue.js程序的思维，还可以快速提升对知识点的综合运用能力，让读者能够回顾以往所学的知识点，并结合新的知识点进行综合应用。
3.综合技术、实际项目
本书在项目篇中提供了1个贴近实际应用的项目，力求通过实际应用使读者更容易地掌握Vue.js技术与对应业务的需求。项目是根据实际开发经验总结而来，包含了在实际开发中所遇到的各种问题。项目结构清晰、扩展性强，读者可根据个人需求进行扩展开发。
4.精彩栏目、贴心提示
本书根据实际学习的需要，设置了“注意”“说明”等许多贴心的小栏目，辅助读者轻松理解所学知识，规避编程陷阱。
5.丰富资源、边学边练
本书提供了丰富的学习资源，包含视频、源代码、实战练习等。读者可访问我社官网>服务>资源下载页面：***。
本书约定
本书推荐系统及开发工具
系统（Win7、Win11兼容）	   WebStorm 2021.1（2020、2019、2018等兼容）
读者服务
为方便解决读者在学习本书过程中遇到的疑难问题及获取更多图书配套资源，我们在明日学院网站为您提供了社区服务和配套学习服务支持。此外，我们还提供了质量反馈信箱及售后服务电话等，如图书有质量问题，可以及时联系我们，我们将竭诚为您服务。
√质量反馈信箱：mingrisoft@***
√售后服务电话：4006751066
√售后服务QQ群：706013952（若此群已满，请根据提示加入相应的群）
√微信公众号：明日IT部落
本书由明日科技的Web前端开发团队策划并组织编写，主要编写人员有张鑫、王小科、赵宁、周佳星、李磊、王国辉、高春艳、赛奎春、葛忠月、宋万勇、杨丽、刘媛媛、依莹莹等。在编写本书的过程中，我们本着科学、严谨的态度，力求精益求精，但疏漏之处在所难免，敬请广大读者批评斧正。
感谢您阅读本书，希望本书能成为您编程路上的领航者。
祝您读书快乐！

编者

基础篇 001
第1章 初识Vue.js 002
1.1 Vue.js概述 002
1.1.1 什么是Vue.js 002
1.1.2 Vue.js的主要特性 003
1.2 Vue.js的安装 003
1.2.1 直接下载并引入 003
1.2.2 引用外部CDN文件 004
1.2.3 使用NPM方法 004
1.3 Vue.js的开发模式 005
1.4 WebStorm简介 005
1.4.1 WebStorm的下载 006
1.4.2 WebStorm的安装 006
1.5 创建第一个Vue实例 010

第2章 基础特性 015
2.1 创建Vue实例 015
2.1.1 使用el选项定义挂载元素 015
2.1.2 使用data选项定义数据 016
2.1.3 使用methods选项定义方法 017
2.1.4 生命周期钩子函数 018
2.2 实现数据绑定 019
2.2.1 插值 019
2.2.2 定义过滤器 024
2.2.3 使用指令 028
2.3 综合案例—动态显示时间 029
2.4 实战练习 031

第3章 条件判断 032
3.1 使用v-if指令 032
3.1.1 基本用法 032
3.1.2 判断一组元素 033
3.2 使用v-else指令 033
3.3 使用v-else-if指令 035
3.4 管理可复用的元素 037
3.5 使用v-show指令 038
3.5.1 基本用法 038
3.5.2 v-if指令和v-show指令的比较 039
3.6 综合案例—输出奖项级别及奖品 039
3.7 实战练习 041

第4章 列表渲染 043
4.1 遍历数组 043
4.1.1 基本用法 043
4.1.2 循环渲染多个元素 045
4.1.3 数组的操作 046
4.2 遍历对象 050
4.2.1 基本用法 050
4.2.2 添加响应式属性 052
4.3 遍历整数 054
4.4 综合案例—过滤图书信息 055
4.5 实战练习 056

第5章 计算属性和监听属性 058
5.1 计算属性的基本用法 058
5.1.1 什么是计算属性 058
5.1.2 简单应用 059
5.2 getter和setter 060
5.2.1 使用getter读取属性值 060
5.2.2 使用setter设置属性值 061
5.3 计算属性的缓存 062
5.4 监听属性的用法 064
5.4.1 什么是监听属性 064
5.4.2 简单应用 065
5.4.3 deep选项的用法 066
5.5 计算属性和监听属性的比较 066
5.6 综合案例—统计购物车中的商品总价 067
5.7 实战练习 069

第6章 样式绑定 070
6.1 绑定class属性 070
6.1.1 绑定为对象 070
6.1.2 绑定为数组 076
6.2 绑定style属性 078
6.2.1 绑定为对象 078
6.2.2 绑定为数组 081
6.3 综合案例—竖向导航菜单 082
6.4 实战练习 084

第7章 事件处理 085
7.1 监听DOM事件 085
7.1.1 v-on指令 085
7.1.2 绑定事件处理方法 086
7.1.3 使用内联语句 089
7.2 事件中的修饰符 091
7.2.1 事件修饰符 091
7.2.2 按键修饰符 093
7.3 综合案例—二级联动菜单 095
7.4 实战练习 098

第8章 表单控件绑定 099
8.1 文本框的绑定 099
8.1.1 绑定单行文本框 099
8.1.2 绑定文本域 101
8.2 单选按钮的绑定 103
8.3 复选框的绑定 105
8.3.1 绑定单个复选框 105
8.3.2 绑定多个复选框 107
8.4 下拉菜单的绑定 108
8.4.1 绑定单选下拉菜单 108
8.4.2 绑定可多选的下拉菜单 111
8.5 将值绑定到动态属性 113
8.5.1 单选按钮的值绑定 113
8.5.2 复选框的值绑定 113
8.5.3 下拉菜单的值绑定 115
8.6 v-model指令的修饰符 115
8.6.1 lazy修饰符 115
8.6.2 number修饰符 116
8.6.3 trim修饰符 116
8.7 综合案例—省市区三级联动菜单 117
8.8 实战练习 119

第9章 自定义指令 121
9.1 注册自定义指令 121
9.1.1 注册全局自定义指令 121
9.1.2 注册局部自定义指令 122
9.2 钩子函数 123
9.3 绑定值的类型 126
9.3.1 绑定数值 126
9.3.2 绑定字符串 127
9.3.3 绑定对象字面量 127
9.4 综合案例—实现元素的随意拖动 128
9.5 实战练习 130

第10章 组件 131
10.1 组件的注册 131
10.1.1 全局注册 131
10.1.2 局部注册 134
10.2 向子组件传递数据 135
10.2.1 传递静态数据 135
10.2.2 Prop的书写规则 136
10.2.3 传递动态数据 137
10.2.4 Prop验证 141
10.3 组件的事件处理 143
10.3.1 自定义事件 143
10.3.2 监听原生事件 147
10.4 使用插槽实现内容分发 147
10.4.1 插槽的基础用法 148
10.4.2 编译作用域 148
10.4.3 设置后备内容 149
10.4.4 具名插槽的用法 150
10.4.5 插槽Prop 153
10.5 混入对象 156
10.5.1 混入的基础用法 156
10.5.2 选项的合并 157
10.5.3 全局混入对象 160
10.6 动态组件的使用 161
10.6.1 动态组件的基础用法 161
10.6.2 组件的缓存 163
10.7 综合案例—实现经典散文和经典小说之间的切换 166
10.8 实战练习 169

第11章 过渡效果 171
11.1 单元素的过渡效果 171
11.1.1 CSS过渡效果 171
11.1.2 过渡的类名 172
11.1.3 CSS动画效果 174
11.1.4 自定义过渡类名 176
11.1.5 使用钩子函数设置过渡 177
11.2 多元素的过渡效果 180
11.2.1 多元素过渡的基本用法 180
11.2.2 设置元素的key属性 181
11.2.3 设置过渡模式 184
11.3 多组件的过渡效果 185
11.4 列表的过渡效果 188
11.5 综合案例—广告图片的轮播效果 190
11.6 实战练习 193

第12章 使用插件实现路由和Ajax 194
12.1 设置路由 194
12.1.1 引入vue-router 194
12.1.2 路由的基本用法 196
12.1.3 动态匹配路由 197
12.1.4 设置路由名称 198
12.1.5 应用push()方法实现跳转 198
12.1.6 嵌套路由 201
12.1.7 设置视图名称 208
12.1.8 路由重定向 211
12.1.9 路由的高级用法 211
12.2 实现Ajax请求 216
12.2.1 引入axios 216
12.2.2 发送GET请求 217
12.2.3 发送POST请求 220
12.3 综合案例—应用嵌套路由实现组件的切换 223
12.4 实战练习 225

第13章 单页Web应用 227
13.1 webpack简介 227
13.1.1 webpack的安装 227
13.1.2 webpack的基本用法 228
13.2 loader简介 230
13.2.1 CSS加载器 230
13.2.2 配置文件 231
13.2.3 图片加载器 233
13.3 单文件组件 235
13.3.1 什么是单文件组件 235
13.3.2 简单应用 235
13.4 使用@vue/cli构建项目 238
13.4.1 @vue/cli的安装 238
13.4.2 快速构建项目 239
13.5 综合案例—实现购物车功能 243
13.6 实战练习 247

第14章 状态管理 248
14.1 什么是Vuex 248
14.2 Vuex的使用 249
14.2.1 Vuex的组成 249
14.2.2 在@vue/cli中使用Vuex 249
14.3 综合案例—保存用户登录状态 260
14.4 实战练习 266


案例篇 269
第15章 模拟QQ聊天窗口——Vue.js+JavaScript实现 270
15.1 案例分析 270
15.2 实现过程 271
15.2.1 左侧用户列表的设计 272
15.2.2 聊天内容显示区域设计 274
15.2.3 文字编辑区域设计 274

第16章 贪吃蛇小游戏——Vue.js+JavaScript实现 278
16.1 案例分析 278
16.2 实现过程 279
16.2.1 游戏初始界面设计 279
16.2.2 游戏操作 282

第17章 注册与登录——@vue/cli+Router+Vuex实现 285
17.1 案例分析 285
17.2 实现过程 286
17.2.1 注册页面设计 287
17.2.2 用户注册验证 288
17.2.3 保存注册信息 290
17.2.4 登录页面设计 290
17.2.5 验证滑块设计 291
17.2.6 用户登录验证 292
17.2.7 在根组件中实现路由 293

第18章 时光音乐网首页设计——@vue/cli+axios实现 296
18.1 案例分析 296
18.2 实现过程 297
18.2.1 导航栏的设计 297
18.2.2 歌曲列表展示界面 298
18.2.3 轮播图的设计 300
18.2.4 歌曲排行榜 302
18.2.5 最新音乐资讯 303
18.2.6 页面底部的设计 304
18.2.7 在根组件中构建音乐网首页 305

第19章 游戏公园——@vue/cli+Router+Vuex实现 307
19.1 案例分析 307
19.2 实现过程 309
19.2.1 主页设计 309
19.2.2 博客列表页面设计 314
19.2.3 博客详情页面设计 315
19.2.4 关于我们页面设计 318


项目篇 321
第20章 51购商城——Vue.js+@vue/cli+Vuex实现 322
20.1 项目的设计思路 322
20.1.1 项目概述 322
20.1.2 界面预览 322
20.1.3 功能结构 324
20.1.4 业务流程 324
20.1.5 文件夹组织结构 325
20.2 主页的设计与实现 325
20.2.1 主页的设计 325
20.2.2 顶部区和底部区功能的实现 327
20.2.3 商品分类导航功能的实现 330
20.2.4 轮播图功能的实现 331
20.2.5 商品推荐功能的实现 335
20.3 商品详情页面的设计与实现 337
20.3.1 商品详情页面的设计 337
20.3.2 图片放大镜效果的实现 338
20.3.3 商品概要功能的实现 340
20.3.4 猜你喜欢功能的实现 343
20.3.5 选项卡切换效果的实现 345
20.4 购物车页面的设计与实现 346
20.4.1 购物车页面的设计 346
20.4.2 购物车页面的实现 347
20.5 付款页面的设计与实现 350
20.5.1 付款页面的设计 350
20.5.2 付款页面的实现 350
20.6 登录注册页面的设计与实现 354
20.6.1 登录注册页面的设计 354
20.6.2 登录页面的实现 354
20.6.3 注册页面的实现 357