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

基础篇  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