目录

第1章  Vue.js概述 1

1.1  Vue.js简介 1

1.2  Vue.js生产环境配置 2

1.2.1  Vue.js引入方法 2

1.2.2  安装Vue Devtools 3

1.3  Vue页面基本结构 5

1.3.1  <template>标记 5

1.3.2  <script>标记 6

1.3.3  <style>标记 8

1.4  Vue.js开发工具 8

1.4.1  Visual Studio Code 9

1.4.2  Sublime Text 9

1.4.3  WebStorm 10

1.4.4  HBuilderX 10

本章小结 11

练习1 11

实训1   12

第2章  Vue.js基础 15

2.1  MVC与MVVM模式 15

2.1.1  MVC模式 15

2.1.2  MVVM模式 16

2.1.3  MVVM模式的前端框架发展趋势 17

2.1.4  MVVM模式的应用 17

2.2  数据绑定与插值 20

2.2.1  文本绑定 20

2.2.2  HTML代码绑定 20

2.2.3  属性绑定 21

2.2.4  JavaScript表达式绑定 21

2.3  计算属性与方法 22

2.3.1  计算属性基础应用 23

2.3.2  计算属性缓存与方法的比较 24

2.3.3  计算属性的setter和getter 26

2.4  侦听属性 29

2.4.1  侦听属性基本用法 29

2.4.2  侦听属性高级用法 31

2.5  生命周期钩子函数 34

2.5.1  生命周期钩子函数的作用 34

2.5.2  生命周期钩子函数的应用 37

2.6  控制台对象 39

2.6.1  显示信息的命令 40

2.6.2  占位符 40

2.6.3  分组显示 41

2.6.4  查看对象的信息 42

2.6.5  显示某个节点的内容 42

2.6.6  判断变量是否为真 42

2.6.7  追踪函数的调用轨迹 43

2.6.8  计时功能 43

2.6.9  性能分析 44

2.6.10  表格形式输出数组和对象 45

2.7  数据与方法 48

2.7.1  数据对象的定义与使用 49

2.7.2  Vue实例属性与方法 50

2.8  Vue中的数组变动更新检测 53

2.8.1  变异方法 53

2.8.2  非变异方法 54

2.9  Vue中的过滤器 57

本章小结 60

练习2 61

实训2   62

第3章  Vue.js指令 66

3.1  Vue.js内置指令 67

3.1.1  条件渲染 67

3.1.2  用key管理可复用的元素 69

3.1.3  根据条件展示元素 71

3.1.4  列表渲染 73

3.1.5  绑定属性 81

3.1.6  事件处理 83

3.1.7  事件修饰符 85

3.1.8  按键修饰符 90

3.1.9  表单输入绑定 92

3.1.10  表单元素值绑定 95

3.1.11  v-model修饰符 97

3.1.12  v-text与v-html指令 98

3.1.13  v-pre、v-once和v-cloak指令 100

3.2  Vue.js自定义指令 101

3.2.1  自定义指令注册 101

3.2.2  对象字面量 105

3.2.3  动态指令参数 105

3.2.4  自定义指令实际应用 107

本章小结 108

练习3 109

实训3   110

第4章  Vue.js基础项目实战 114

4.1  简易图书管理 114

4.1.1  项目需求 114

4.1.2  项目实现 115

4.2  我的待办事项 119

4.2.1  项目需求 119

4.2.2  项目实现 120

本章小结 125

实训4   125

第5章  Vue.js组件开发 126

5.1  组件基础 126

5.1.1  组件命名 127

5.1.2  组件注册 128

5.2  组件间通信 131

5.2.1  父组件向子组件传值 131

5.2.2  子组件向父组件传值 139

5.2.3  兄弟组件之间的通信 143

5.2.4  父链与子组件索引 145

5.3  单文件组件 146

5.4  插槽 149

5.4.1  匿名插槽 149

5.4.2  具名插槽 151

5.4.3  作用域插槽 153

5.4.4  动态插槽名 155

本章小结 157

练习5 158

实训5   158

第6章  Vue.js过渡与动画 163

6.1  单元素/单组件的过渡 163

6.1.1  过渡的类名 165

6.1.2  CSS 过渡 166

6.1.3  CSS动画 167

6.1.4  自定义过渡的类名 168

6.1.5  同时使用过渡和动画 170

6.1.6  显性的过渡持续时间 170

6.1.7  JavaScript 钩子 170

6.2  初始渲染的过渡 171

6.3  多个元素的过渡 172

6.4  多个组件的过渡 177

6.5  列表过渡 178

6.5.1  列表的进入/离开过渡 179

6.5.2  列表的排序过渡 181

6.5.3  列表的交错过渡 183

本章小结 186

练习6 186

实训6   187

第7章  Vue项目开发环境与辅助工具部署 192

7.1  部署Node.js 192

7.1.1  Node.js简介 192

7.1.2  Node.js部署 194

7.1.3  Node.js模块系统 194

7.1.4  Node.js 创建第1个应用 202

7.2  Node包管理器npm 203

7.2.1  npm简介 203

7.2.2  npm常用命令 204

7.3  Node.js环境配置 206

7.4  webpack打包工具 208

7.4.1  webpack简介 208

7.4.2  webpack使用与基本配置 209

7.4.3  webpack配置加载器 215

7.4.4  webpack配置插件 222

7.4.5  webpack配置开发服务器 228

7.5  Vue CLI 235

7.5.1  Vue CLI安装 236

7.5.2  Vue CLI创建Vue项目 236

7.5.3  Vue CLI可视化创建Vue项目 238

本章小结 240

练习7 240

实训7   241

第8章  前端路由Vue Router 246

8.1  Vue Router概述 246

8.1.1  Vue Router的安装与使用 247

8.1.2  Vue Router基础应用 247

8.2  Vue Router高级应用 252

8.2.1  动态路由匹配 252

8.2.2  嵌套路由 254

8.2.3  编程式导航 260

8.2.4  命名路由 262

8.2.5  命名视图 263

8.2.6  重定向和别名 264

8.2.7  路由组件传参 265

8.2.8  HTML5 History模式 267

本章小结 267

练习8 268

实训8   269

第9章  状态管理模式Vuex 275

9.1  Vuex概述 275

9.1.1  Vuex定义 276

9.1.2  简单状态管理——store模式 277

9.2  Vuex基本应用 280

9.3  Vuex核心概念 281

9.3.1  一个完整的store结构 281

9.3.2  最简单的store 282

9.3.3  Vuex中的state 283

9.3.4  Vuex中的getters 287

9.3.5  Vuex中的mutations 291

9.3.6  Vuex中的actions 293

9.3.7  Vuex中的modules 301

9.4  Vuex多模块实战案例 307

本章小结 313

练习9 313

实训9   314

第10章  Vue UI组件库 318

10.1  Vue PC端组件库 318

 10.1.1  Element UI 319

 10.1.2  iView UI 331

 10.1.3  其他PC端UI组件库 336

10.2  Vue移动端UI组件库 336

 10.2.1  Mint UI 336

 10.2.2  Vant 340

 10.2.3  其他移动端组件库 344

本章小结 345

练习10 345

实训10   346

第11章  Vue高级项目实战 351

11.1  友联通讯录 351

 11.1.1  项目需求 351

 11.1.2  实现技术 352

 11.1.3  环境配置 352

 11.1.4  项目实现 353

11.2  通用登录/注册管理系统 379

 11.2.1  项目需求 379

 11.2.2  实现技术 380

 11.2.3  环境配置 381

 11.2.4  项目实现 383

本章小结 415

练习11 415

实训11 415

第12章  Vue 3.0基础应用 416

12.1　Vue 3.0新特性 416

 12.1.1  新特性简介 417

 12.1.2  下一阶段工作 418

 12.1.3  Vue 3.0学习参考 418

12.2  Vue 3.0初步体验 418

 12.2.1  Vue 3.0下载与引用 418

 12.2.2  Vue 3.0创建简易应用 419

 12.2.3  Vue 3.0发布文档的使用 422

12.3  Vue 3.0新特性应用 423

 12.3.1  使用脚手架创建项目 423

 12.3.2  组件选项 425

 12.3.3  ref()、reactive()和toRefs()函数 428

 12.3.4  computed、watch和watchEffect 431

 12.3.5  ref引用DOM元素和组件实例 434

 12.3.6  Vue Router和Vuex 436

 12.3.7  Vue 3.0生命周期 441

 12.3.8  provide()和inject()函数 442

 12.3.9  组合式API 447

 12.3.10  模板refs 449

12.4  Vue 3.0购物车实战 453

 12.4.1  项目设计要求 453

 12.4.2  项目实现 455

本章小结 464

练习12 464

实训12   465

参考文献 470