Vue.js框架与Web前端开发从入门到精通

第1章 Vue.js概述
1.1 Vue.js简介 2
1.2 Vue.js与其他前端框架的对比 4
1.3 深入理解双向绑定 9
1.4 Vue.js的优势 12
1.5 小结 13

第2章 开始Vue.js之旅
2.1 安装Vue.js开发环境 16
2.1.1 Node.js环境安装 16
2.1.2 npm安装及参数设置 23
2.1.3 用脚手架生成项目目录 28
2.1.4 自定义Vue.js模板项目文件 31
2.1.5 使用vue-cli3图形界面 34
2.1.6 下载、安装、设置VSCode编辑器 44
2.2 安装VSCode常用第三方包 46
2.3 在VSCode中开发项目 48
2.3.1 在VSCode中创建新项目 48
2.3.2 VSCode导入项目 51
2.3.3 VSCode快捷键 54
2.3.4 在VSCode中安装插件 58
2.3.5 在VSCode中运行Vue.js项目 62
2.3.6 用VSCode发布项目 64
2.4 小结 67

第3章 初识Vue.js
3.1 Vue.js项目初始化 69
3.1.1 创建一个Vue.js实例 69
3.1.2 数据绑定与方法使用 70
3.1.3 生命周期钩子函数 72
3.1.4 生命周期示意图 73
3.2 模板语法 74
3.2.1 向网页插入文本内容 75
3.2.2 原始HTML 75
3.2.3 使用JavaScript表达式 76
3.2.4 指令参数 76
3.2.5 动态参数 77
3.2.6 修饰符缩写 78
3.2.7 v-bind缩写 78
3.2.8 v-on缩写 78
3.3 计算属性和侦听器 79
3.3.1 计算属性 79
3.3.2 基础例子 79
3.3.3 计算属性缓存vs方法 80
3.3.4 计算属性vs侦听属性 81
3.3.5 计算属性的setter 82
3.3.6 侦听器 82
3.4 class与style绑定 84
3.4.1 绑定HTML class 84
3.4.2 绑定内联样式 87
3.5 条件编译 88
3.5.1 在元素上使用v-if条件编译分组 89 3.5.2 v-else 89
3.5.3 v-else-if 89
3.5.4 v-if vs v-show 90
3.5.5 v-if与v-for 90
3.6 列表编译 90
3.6.1 用v-for把一个数组对应为一组标签 90
3.6.2 在v-for中使用对象 91
3.6.3 维护状态 92
3.6.4 数组更新检测 93
3.6.5 对象变更检测注意事项 94
3.6.6 显示过滤/排序后的结果 94
3.6.7 在v-for中使用值范围 95
3.6.8 在上使用v-for 95 3.6.9 在组件上使用v-for 95
3.7 事件处理 97
3.7.1 监听事件 98
3.7.2 事件处理方法 98
3.7.3 内联处理器中的方法 99
3.7.4 事件修饰符 99
3.7.5 按键修饰符 101
3.7.6 按键码 101
3.7.7 系统修饰键 101
3.7.8 鼠标按钮修饰符 102
3.7.9 为什么在HTML中监听事件 103
3.8 表单输入绑定 103
3.8.1 文本 103
3.8.2 多行文本 104
3.8.3 复选框 104
3.8.4 单选按钮 104
3.8.5 选择框 105
3.8.6 值绑定 106
3.8.7 修饰符 108
3.8.8 在组件上使用v-model 108
3.9 组件基础 108
3.9.1 基本示例 109
3.9.2 组件的复用 109
3.9.3 data一定要是一个函数 109
3.9.4 组件的组织 110
3.9.5 通过prop向子组件传递数据 111
3.9.6 单个根标签 112
3.9.7 监听子组件事件 113
3.9.8 使用事件抛出一个值 114
3.9.9 在组件上使用v-model 115
3.9.10 通过插槽分发内容 116
3.9.11 动态组件 116
3.9.12 解析DOM模板时的注意事项 117
3.10 小结 117

第4章 用axios与后端接口进行数据联动
4.1 axios概要 119
4.2 axios方法的基本使用 120
4.2.1 axios的安装 120
4.2.2 axios请求方法及别名（get方法） 121
4.2.3 axios请求方法及别名（post和put方法） 124
4.2.4 axios请求方法及别名（delete方法） 130
4.2.5 并发请求 133
4.3 axios方法深入 135
4.3.1 创建axios实例 135
4.3.2 实例的相关配置 136
4.3.3 常用参数配置具体使用方法 138
4.3.4 拦截器 139
4.3.5 错误处理 141
4.3.6 取消请求 143
4.4 axios实战 144
4.4.1 项目环境配置 144
4.4.2 接口的调试 147
4.4.3 联系人列表 151
4.4.4 添加、编辑联系人 155
4.4.5 保存联系人 157
4.4.6 删除联系人 162
4.4.7 axios的进一步封装 164
4.5 小结 168

第5章 浅析Router的使用
5.1 Router基础 170
5.1.1 起步 170
5.1.2 动态路由匹配 172
5.1.3 嵌套路由 176
5.1.4 编程式的导航 179
5.1.5 命名路由 180
5.1.6 命名视图 181
5.1.7 重定向和别名 183
5.2 小结 185

第6章 生命周期和钩子函数解析
6.1 beforeCreate钩子函数 187
6.2 created钩子函数 187
6.3 mounted钩子函数 188
6.4 updated钩子函数 188
6.5 beforeDestroy钩子函数 189
6.6 小结 189

第7章 组件的灵活使用
7.1 组件注册 191
7.1.1 组件名 191
7.1.2 全局注册vs局部注册 192
7.2 prop 193
7.2.1 prop的大小写 193
7.2.2 prop类型 193
7.2.3 传递静态或动态prop 194
7.2.4 prop验证 196
7.3 自定义事件 197
7.3.1 事件名 197
7.3.2 自定义组件的v-model 198
7.4 小结 199

第8章 Vue.js下的ECharts使用
8.1 搭建ECharts开发环境 201
8.2 ECharts使用 202
8.2.1 饼图 202
8.2.2 柱状图 210
8.2.3 曲线图 218
8.2.4 散点图 224
8.2.5 雷达图 230
8.2.6 标签图 237
8.3 小结 240

第9章 ElementUI前端框架
9.1 ElementUI框架概述 242
9.2 搭建ElementUI开发环境 243
9.3 基础组件 243
9.3.1 Icon图标 243
9.3.2 Button按钮 244
9.3.3 Link文字链接 248
9.4 表单组件 250
9.4.1 Radio单选按钮 250
9.4.2 Checkbox复选框 255
9.4.3 Input输入框 258
9.4.4 InputNumber计数器 259
9.4.5 Select选择器 260
9.4.6 Switch开关 261
9.4.7 TimePicker时间选择器 262
9.4.8 DatePicker日期选择器 263
9.4.9 DateTimePicker日期时间选择器 264
9.4.10 Upload上传 266
9.4.11 Rate评分 268
9.4.12 Form表单 269
9.5 数据显示组件 271
9.5.1 Table表格 271
9.5.2 Pagination分页 273
9.5.3 Badge标记 274
9.6 提示通知类组件 275
9.6.1 Loading加载 275
9.6.2 Message消息提示 277
9.6.3 MessageBox弹框 278
9.6.4 Notification通知 279
9.7 导航菜单类组件 280
9.7.1 NavMenu导航菜单 280
9.7.2 Tabs标签页 282
9.7.3 Dropdown下拉菜单 283
9.8 其他组件 284
9.8.1 Dialog对话框 284
9.8.2 Tooltip文字提示 285
9.8.3 Card卡片 288
9.8.4 Image图片 289
9.9 小结 290

第10章 实战：上市集团门户网站开发
10.1 路由框架搭建 292
10.2 业务目录安排 299
10.3 开发文件配置 300
10.4 公共方法编写 304
10.5 公共样式编写 306
10.6 页面效果实现 312
10.7 小结 314

第11章 实战：基于Vue.js框架的后台管理系统开发
11.1 路由框架搭建 316
11.2 业务目录安排 320
11.3 开发文件配置 321
11.4 公共方法编写 330
11.5 公共样式编写 332
11.6 页面效果实现 332
11.7 小结 336