Vue.js前端开发技术

第1章 Vue入门　1

1.1　Vue简述　1

1.1.1　什么是Vue.js　1

1.1.2　为什么使用Vue.js　2

1.1.3　Vue.js的主要特点　2

1.1.4　Vue.js的优势　3

1.2　Vue.js的下载及使用　3

1.2.1　Vue.js下载　4

1.2.2　Vue.js引用　4

1.2.3　npm安装　4

1.2.4　解读Vue项目文件目录结构　8

1.3　实例化Vue对象、数据和方法　9

1.3.1　实例化Vue对象　9

1.3.2　Vue数据和方法　10

1.3.3　将数据挂载到DOM页面　11

1.4　MVVM模式　13

本章小结　14

习题　15

第2章　Vue数据绑定　16

2.1　Vue模板语法　16

2.1.1　模板语法　16

2.1.2　插值　17

2.1.3　表达式　17

2.2　响应式声明渲染机制　18

2.2.1　响应式声明渲染机制简介　18

2.2.2　Vue属性绑定　21

2.2.3　Vue双向数据绑定　22

2.3　Vue计算属性　24

2.3.1　计算属性　24

2.3.2　计算属性与methods的区别　27

2.4　Vue生命周期　28

2.4.1　Vue实例生命周期图解　28

2.4.2　Vue生命周期详解　29

2.4.3　Vue各生命周期适合开发的业务逻辑　31

本章小结　31

习题　32

第3章　Vue指令　33

3.1　Vue指令概述　33

3.1.1　指令　33

3.1.2　指令修饰符　34

3.2　Vue指令详解　34

3.2.1　指令v-if　34

3.2.2　指令v-for　36

3.2.3　指令v-on　41

3.2.4　指令v-show　43

3.3　Vue动态样式绑定　46

3.3.1　v-bind指令属性　46

3.3.2　v-bind绑定class　47

3.3.3　v-bind数组表达式绑定class属性　48

3.3.4　v-bind对象语法绑定行内样式　49

3.3.5　v-bind数组语法绑定行内样式　50

3.4　Vue表单输入绑定　51

3.4.1　指令v-model　51

3.4.2　v-bind在控件上绑定value　56

3.4.3　表单中的参数特性　63

3.5　综合案例　64

本章小结　67

习题　67

第4章　Vue事件处理　68

4.1　Vue事件处理器　68

4.1.1　监听事件　68

4.1.2　方法事件处理器　69

4.1.3　内联事件处理器　70

4.2　修饰符　72

4.2.1　事件修饰符　72

4.2.2　按键修饰符　73

4.2.3　修饰键　77

4.3　综合案例　77

本章小结　79

习题　79

第5章　Vue组件　80

5.1　组件的基本使用　80

5.1.1　什么是组件　80

5.1.2　组件使用　82

5.1.3　组件中的data必须是函数　88

5.2　Vue组件嵌套　90

5.2.1　组件嵌套　90

5.2.2　使用props　92

5.2.3　使用slot插槽内容分发　101

5.2.4　组件实战　107

5.3　组件通信　111

5.3.1　父组件向子组件通信　111

5.3.2　子组件向父组件通信　112

5.3.3　任意组件及平行组件通信　116

5.4　创建自己的组件　118

本章小结　123

习题　123

第6章　自定义指令　128

6.1　自定义指令概述　128

6.1.1　自定义全局指令　128

6.1.2　自定义局部指令　130

6.1.3　案例分析　131

6.2　钩子函数　132

6.2.1　钩子函数参数　133

6.2.2　函数简写　136

6.3　对象字面量　136

本章小结　137

习题　137

第7章　过渡与动画　138

7.1　transition组件　138

7.2　单元素/组件的过渡　141

7.2.1　transition标签结合CSS样式实现动画　141

7.2.2　animate.css结合transition实现动画　143

7.2.3　钩子函数实现动画　144

7.3　多个元素的过渡　147

7.4　多个组件的过渡　149

7.5　综合案例　151

本章小结　156

习题　156

第8章　渲染函数　157

8.1　渲染函数概述　157

8.1.1　从虚拟DOM了解Vue渲染函数　157

8.1.2　为什么使用渲染函数　158

8.1.3　什么是渲染函数　159

8.2　createElement方法　161

8.2.1　createElement参数　161

8.2.2　VNodes必须*　166

8.3　使用JavaScript代替模板功能　167

8.3.1　v-if和v-for　167

8.3.2　v-model　168

8.3.3　slot插槽　170

8.3.4　作用域插槽　171

本章小结　172

习题　172

第9章　Vue路由vue-router　173

9.1　路由安装和使用　173

9.2　传递参数及获取参数　175

9.2.1　使用路由传递参数　175

9.2.2　地址栏传递参数　177

9.3　子路由　178

9.3.1　创建子路由　178

9.3.2　路由切换组件　180

9.4　命名视图和导航钩子　183

9.4.1　命名视图　183

9.4.2　导航钩子　185

9.5　元数据及路由匹配　188

本章小结　191

习题　192

第10章　使用webpack　193

10.1　webpack基础　193

10.2　webpack的基本配置　196

10.3　webpack常用的Loaders　198

10.4　插件　201

10.5　webpack常用命令　204

本章小结　204

习题　204

第11章　综合案例开发　205

11.1　综合案例开发步骤　205

11.1.1　通过vue-cli构建工具初始化项目目录　205

11.1.2　初始化依赖包　206

11.1.3　安装vue-router组件　206

11.1.4　创建router对象及配置路由　207

11.1.5　在App.vue中添加路由导航　208

11.2　解析Vue生成文件目录结构　210

11.2.1　build文件夹　210

11.2.2　config文件夹　210

11.2.3　node_modules文件夹　211

11.2.4　src文件夹　211

11.2.5　App.vue与main.js　211

11.3　vue-resource插件　212

11.4　实战：单词本　216

11.4.1　展示单词本　216

11.4.2　修改删除单词　217

11.4.3　添加单词　221

本章小结　223

习题　223

第12章　Vue工程项目实战　224

12.1　项目分析　224

12.2　工程化项目搭建　224

12.2.1　项目准备工作　225

12.2.2　项目资源准备　226

12.2.3　图标字体制作　230

12.2.4　项目目录设计　232

12.2.5　模拟后台数据（mock数据）　233

12.3　组件化开发　235

12.4　使用vue-resource调用后台接口　247

12.4.1　理解后台接口文档　247

12.4.2　根据文档调用接口　248

12.4.3　具体业务逻辑开发　249

12.5　项目打包　251

本章小结　252

习题　252