Vue.js从入门到精通

丛书说明：“软件开发视频大讲堂”丛书第1版于2008年8月出版，因其编写细腻、易学实用、配备海量学习资源和全程视频等，在软件开发类图书市场上产生了很大反响，绝大部分品种在全国软件开发零售图书排行榜中名列前茅，2009年多个品种被评为“全国优秀畅销书”。

“软件开发视频大讲堂”丛书第2版于2010年8月出版，第3版于2012年8月出版，第4版于2016年10月出版，第5版于2019年3月出版，第6版于2021年7月出版。十五年间反复锤炼，打造经典。丛书迄今累计重印680多次，销售400多万册，不仅深受广大程序员的喜爱，还被百余所高校选为计算机、软件等相关专业的教学参考用书。

“软件开发视频大讲堂”丛书第7版在继承前6版所有优点的基础上，进行了大幅度的修订。第一，根据当前的技术趋势与热点需求调整品种，拓宽了程序员岗位就业技能用书；第二，对图书内容进行了深度更新、优化，如优化了内容布置，弥补了讲解疏漏，将开发环境和工具更新为新版本，增加了对新技术点的剖析，将项目替换为更能体现当今IT开发现状的热门项目等，使其更与时俱进，更适合读者学习；第三，改进了教学微课视频，为读者提供更好的学习体验；第四，升级了开发资源库，提供了程序员“入门学习→技巧掌握→实例训练→项目开发→求职面试”等各阶段的海量学习资源；第五，为了方便教学，制作了全新的教学课件PPT。

Vue.js是一套用于构建用户界面的渐进式框架。与其他重量级框架不同的是，它只关注视图层， 采用自底向上增量开发的设计。Vue.js的目标是通过尽可能简单的API来实现响应的数据绑定和组合的视图组件。它不仅容易上手，还非常容易与其他库或已有项目进行整合。

本书内容

本书提供了Vue.js开发从入门到精通所必需的各类知识，全书共分为4篇，具体内容如下。

第1篇：基础知识。该篇介绍初识Vue.js、ECMAScript 6语法介绍、Vue实例与数据绑定、条件判断指令、v-for指令、计算属性和监听属性等内容，并结合大量的图示、实例、视频等使读者快速掌握Vue.js，为后续的学习奠定坚实的基础。

第2篇：核心技术。该篇介绍元素样式绑定、事件处理、表单元素绑定、自定义指令、组件、组合API、过渡和动画效果、渲染函数等内容。学习完本篇，读者能够深入了解和熟悉Vue.js。

第3篇：高级应用。该篇介绍使用Vue Router实现路由、使用axios实现Ajax请求、Vue CLI、状态管理等内容。学习完本篇，读者可以熟练使用Vue.js编写前端Web应用程序。

第4篇：项目开发。该篇使用Vue.js开发一个购物类网站——51购商城，它应用Vue.js、Vue Router和Vuex等技术，打造了一个具有时代气息的网站。

本书特点

由浅入深，循序渐进。本书以初、中级程序员为对象，带领读者先从Vue.js基础学起，再学习Vue.js的核心技术，然后学习Vue.js的高级应用，最后学习开发一个完整项目。在讲解过程中，步骤详尽，版式新颖。

微课视频，讲解详尽。为便于读者直观感受程序开发的全过程，书中重要章节配备了教学微课视频（共132集，时长14小时），使用手机扫描章节标题一侧的二维码，即可观看学习。便于初学者快速入门，感受编程的快乐和成就感，进一步增强学习的信心。

基础示例 编程训练 综合练习 项目案例，实战为王。通过例子学习是最好的学习方式，本书核心知识讲解通过“一个知识点、一个示例、一个结果、一段评析、一个综合应用”的模式，详尽透彻地讲述了实际开发中所需的各类知识。全书共计有56个应用实例，54个编程训练，36个实践与练习，1个项目案例，为初学者打造“学习 训练”的强化实战学习环境。

精彩栏目，贴心提醒。本书根据学习需要在正文中设计了很多“注意”“说明”等小栏目，让读者在学习的过程中更轻松地理解相关知识点及概念，更快地掌握相关技术的应用技巧。

读者对象：有一定Web前端基础的编程自学者；Web前端编程爱好者；大中专院校的Web前端教师和学生；相关培训机构的Web前端教师和学员；进行Web前端毕业设计的学生；初、中级Web前端程序开发人员；Web前端程序测试及维护人员；参加实习的Web前端“菜鸟”程序员

本书学习资源

本书提供了大量的辅助学习资源，读者需刮开图书封底的防盗码，扫描并绑定微信后，获取学习权限。

同步教学微课

学习书中知识时，扫描章节名称处的二维码，可在线观看教学视频。

在线开发资源库

本书配备了强大的Web前端开发资源库，包括技术资源库、实例资源库、项目资源库、源码资源库、视频资源库。扫描二维码，可登录明日科技网站，获取Web前端开发资源库一年的免费使用权限。

学习答疑

关注清大文森学堂公众号，可获取本书的源代码、PPT课件、视频等资源，加入本书的学习交流群，参加图书直播答疑。

读者扫描图书封底的“文泉云盘”二维码，或登录清华大学出版社网站，可在对应图书页面下查阅各类学习资源的获取方式。

感谢您购买本书，希望本书能成为您编程路上的领航者。

“零门槛”编程，一切皆有可能。

祝读书快乐！

《Vue.js从入门到精通》从初学者角度出发，通过通俗易懂的语言、丰富多彩的实例，详细介绍了使用Vue.js进行程序开发需要掌握的各方面技术。全书分为4篇，共19章，内容包括初识Vue.js、ECMAScript 6语法介绍、Vue实例与数据绑定、条件判断指令、v-for指令、计算属性和监听属性、元素样式绑定、事件处理、表单元素绑定、自定义指令、组件、组合API、过渡和动画效果、渲染函数、使用Vue Router实现路由、使用axios实现Ajax请求、Vue CLI、状态管理，以及51购商城项目实战。书中的大多数知识点都结合具体实例进行介绍，涉及的程序代码给出了详细的注释，使读者可轻松领会Vue.js程序开发的精髓，快速提高开发技能。

明日科技，全称是吉林省明日科技有限公司，是一家专业从事软件开发、教育培训以及软件开发教育资源整合的高科技公司，其编写的教材非常注重选取软件开发中的必需、常用内容，同时也很注重内容的易学、方便性以及相关知识的拓展性，深受读者喜爱。其教材多次荣获“全行业优秀畅销品种”“全国高校出版社优秀畅销书”等奖项，多个品种长期位居同类图书销售排行榜的前列。

第1篇 基础知识
第1章 初识Vue.js 2
视频讲解：19分钟
1.1 什么是Vue.js 2
1.1.1 Vue.js简介 2
1.1.2 MVVM开发模式 3
1.1.3 Vue.js的特点 3
1.2 安装Vue.js 4
1.2.1 使用CDN 4
1.2.2 使用NPM 4
1.2.3 使用Vue CLI 5
1.3 Vue.js 3.0的新特性 5
1.4 WebStorm的下载和安装 6
1.4.1 WebStorm的下载 6
1.4.2 WebStorm的安装 7
1.5 第一个Vue.js程序 10
1.6 实践与练习 14
第2章 ECMAScript 6语法介绍 15
视频讲解：74分钟
2.1 块级声明 15
2.1.1 let声明 16
2.1.2 const声明 16
2.2 模板字面量 17
2.2.1 多行字符串 17
2.2.2 字符串占位符 17
2.3 默认参数和rest参数 18
2.3.1 默认参数 18
2.3.2 rest参数 18
2.4 解构赋值 20
2.4.1 对象解构 20
2.4.2 数组解构 21
2.5 展开运算符 21
2.6 对象字面量语法扩展 22
2.6.1 对象初始化的简写 23
2.6.2 对象方法的简写 23
2.6.3 动态属性名 24
2.7 箭头函数 24
2.7.1 语法 24
2.7.2 箭头函数中的this 25
2.8 Promise 26
2.9 类 27
2.9.1 创建类和实例 27
2.9.2 类的构造函数 28
2.9.3 在类中添加方法 29
2.9.4 类的继承 31
2.9.5 静态成员 31
2.10 模块 32
2.10.1 模块概述 32
2.10.2 ES6中的模块 33
2.11 实践与练习 36
第3章 Vue实例与数据绑定 38
视频讲解：36分钟
3.1 应用程序实例及选项 38
3.1.1 数据 39
3.1.2 方法 39
3.1.3 生命周期钩子 40
3.2 插值 42
3.2.1 文本插值 42
3.2.2 插入HTML 43
3.2.3 绑定属性 44
3.2.4 使用表达式 45
3.3 指令 47
3.3.1 参数 47
3.3.2 动态参数 47
3.3.3 修饰符 48
3.4 实践与练习 48
第4章 条件判断指令 49
视频讲解：30分钟
4.1 v-if指令 49
4.1.1 基本用法 49
4.1.2 判断一组元素 50
4.2 v-else指令 51
4.3 v-else-if指令 53
4.4 v-show指令 55
4.5 如何选择v-if和v-show 56
4.6 实践与练习 57
第5章 v-for指令 58
视频讲解：56分钟
5.1 遍历数组 58
5.1.1 基本用法 58
5.1.2 循环一组元素 61
5.1.3 更新数组 62
5.2 遍历对象 65
5.2.1 基本用法 65
5.2.2 向对象中添加响应式属性 67
5.3 遍历整数 68
5.4 key属性 70
5.5 实践与练习 71
第6章 计算属性和监听属性 72
视频讲解：47分钟
6.1 计算属性 72
6.1.1 计算属性简介 72
6.1.2 计算属性的应用 73
6.1.3 计算属性的getter和setter 74
6.1.4 计算属性的缓存 77
6.2 监听属性 79
6.2.1 监听属性简介 79
6.2.2 监听属性的应用 80
6.2.3 监听对象 81
6.3 计算属性和监听属性的比较 82
6.4 实践与练习 83
第2篇 核心技术
第7章 元素样式绑定 86
视频讲解：38分钟
7.1 class绑定 86
7.1.1 对象语法 86
7.1.2 数组语法 94
7.2 style绑定 96
7.2.1 对象语法 96
7.2.2 数组语法 99
7.3 实践与练习 101
第8章 事件处理 102
视频讲解：34分钟
8.1 监听事件 102
8.2 事件处理方法 103
8.2.1 绑定方法 103
8.2.2 使用事件对象 105
8.2.3 使用内联语句 107
8.3 修饰符的使用 109
8.3.1 事件修饰符 109
8.3.2 按键修饰符 111
8.4 实践与练习 114
第9章 表单元素绑定 116
视频讲解：95分钟
9.1 文本框绑定 116
9.1.1 单行文本框 117
9.1.2 多行文本框 119
9.2 复选框绑定 121
9.2.1 单个复选框 121
9.2.2 多个复选框 124
9.3 单选按钮绑定 125
9.4 下拉列表框绑定 127
9.4.1 单选列表框 127
9.4.2 多选列表框 130
9.5 值绑定 133
9.5.1 单选按钮 133
9.5.2 复选框 134
9.5.3 下拉列表框 135
9.6 修饰符的使用 136
9.6.1 lazy 136
9.6.2 number 137
9.6.3 trim 137
9.7 实践与练习 138
第10章 自定义指令 139
视频讲解：16分钟
10.1 注册自定义指令 139
10.1.1 全局自定义指令 139
10.1.2 局部自定义指令 140
10.2 钩子函数 141
10.3 绑定值的类型 145
10.3.1 绑定数值 145
10.3.2 绑定字符串 146
10.3.3 绑定对象字面量 147
10.4 实践与练习 148
第11章 组件 149
视频讲解：118分钟
11.1 注册组件 149
11.1.1 注册全局组件 150
11.1.2 注册局部组件 152
11.2 向子组件传递数据 153
11.2.1 Prop基本用法 153
11.2.2 数据验证 160
11.3 监听子组件事件 163
11.3.1 监听自定义事件 163
11.3.2 监听原生事件 166
11.4 插槽的使用 168
11.4.1 基础用法 168
11.4.2 编译作用域 169
11.4.3 默认内容 170
11.4.4 命名插槽 171
11.4.5 作用域插槽 174
11.5 混入 178
11.5.1 基础用法 178
11.5.2 选项合并 179
11.6 动态组件 182
11.6.1 动态组件的用法 182
11.6.2 缓存效果 185
11.7 实践与练习 190
第12章 组合API 191
视频讲解：31分钟
12.1 什么是组合API 191
12.2 setup()函数 192
12.3 响应式API 194
12.3.1 reactive()方法 194
12.3.2 watchEffect()方法 195
12.3.3 ref()方法 195
12.3.4 computed()方法 197
12.3.5 watch()方法 198
12.4 生命周期钩子函数 200
12.5 使用ref获取DOM元素 200
12.6 实践与练习 202
第13章 过渡和动画效果 203
视频讲解：83分钟
13.1 单元素过渡 203
13.1.1 CSS过渡 203
13.1.2 过渡的类名 205
13.1.3 自定义过渡的类名 206
13.1.4 CSS动画 208
13.1.5 使用JavaScript钩子函数实现动画 209
13.2 多元素过渡 213
13.2.1 多元素过渡的用法 213
13.2.2 设置元素的key属性 214
13.2.3 过渡模式的设置 217
13.3 多组件过渡 218
13.4 列表过渡 222
13.5 实践与练习 224
第14章 渲染函数 226
视频讲解：22分钟
14.1 什么是虚拟DOM 226
14.2 render()函数的使用 227
14.2.1 基本用法 227
14.2.2 h()函数 230
14.3 使用JavaScript代替模板功能 233
14.4 实践与练习 238
第3篇 高级应用
第15章 使用Vue Router实现路由 240
视频讲解：42分钟
15.1 路由基础 240
15.1.1 引入Vue Router 241
15.1.2 基本用法 241
15.1.3 动态路由匹配 244
15.1.4 命名路由 245
15.2 编程式导航 245
15.3 嵌套路由 249
15.4 命名视图 254
15.5 高级用法 257
15.5.1 beforeEach钩子函数 257
15.5.2 scrollBehavior方法 261
15.6 实践与练习 263
第16章 使用axios实现Ajax请求 264
视频讲解：33分钟
16.1 什么是axios 264
16.2 引入axios 265
16.3 发送get请求 265
16.4 发送post请求 267
16.5 实践与练习 270
第17章 Vue CLI 272
视频讲解：17分钟
17.1 Vue CLI简介 272
17.2 Vue CLI的安装 273
17.3 创建项目 274
17.3.1 使用vue create命令 274
17.3.2 使用图形界面 278
17.4 项目结构 279
17.5 编写一个单文件组件 281
17.6 实践与练习 283
第18章 状态管理 285
视频讲解：59分钟
18.1 什么是Vuex 285
18.2 Vuex的组成 286
18.3 Vuex的安装 287
18.4 在项目中使用Vuex 287
18.4.1 创建store 287
18.4.2 定义state 288
18.4.3 定义getter 291
18.4.4 定义mutation 293
18.4.5 定义action 297
18.5 Vuex应用 299
18.6 实践与练习 304
第4篇 项目开发
第19章 51购商城 308
视频讲解：12分钟
19.1 项目的设计思路 309
19.1.1 项目概述 309
19.1.2 界面预览 309
19.1.3 功能结构 311
19.1.4 业务流程 312
19.1.5 文件夹组织结构 312
19.2 商城主页 313
19.2.1 主页的设计 313
19.2.2 顶部区和底部区功能 315
19.2.3 商品分类导航功能 318
19.2.4 轮播图功能 320
19.2.5 商品推荐功能 324
19.3 商品详情页面 327
19.3.1 商品详情页面的设计 327
19.3.2 图片放大镜效果 328
19.3.3 商品概要功能 330
19.3.4 “猜你喜欢”功能 333
19.3.5 选项卡切换效果 336
19.4 购物车页面 338
19.4.1 购物车页面的设计 338
19.4.2 购物车页面的实现 338
19.5 付款页面 341
19.5.1 付款页面的设计 341
19.5.2 付款页面的实现 342
19.6 注册和登录页面 346
19.6.1 注册和登录页面的设计 346
19.6.2 注册页面的实现 347
19.6.3 登录页面的实现 350

《Vue.js从入门到精通》从初学者角度出发，通过通俗易懂的语言、丰富多彩的实例，详细介绍了使用Vue.js进行程序开发需要掌握的各方面技术。全书分为4篇，共19章，内容包括初识Vue.js、ECMAScript 6语法介绍、Vue实例与数据绑定、条件判断指令、v-for指令、计算属性和监听属性、元素样式绑定、事件处理、表单元素绑定、自定义指令、组件、组合API、过渡和动画效果、渲染函数、使用Vue Router实现路由、使用axios实现Ajax请求、Vue CLI、状态管理，以及51购商城项目实战。书中的大多数知识点都结合具体实例进行介绍，涉及的程序代码给出了详细的注释，使读者可轻松领会Vue.js程序开发的精髓，快速提高开发技能。

明日科技，全称是吉林省明日科技有限公司，是一家专业从事软件开发、教育培训以及软件开发教育资源整合的高科技公司，其编写的教材非常注重选取软件开发中的必需、常用内容，同时也很注重内容的易学、方便性以及相关知识的拓展性，深受读者喜爱。其教材多次荣获“全行业优秀畅销品种”“全国高校出版社优秀畅销书”等奖项，多个品种长期位居同类图书销售排行榜的前列。