Vue.js前端开发快速入门与专业应用

第1章　Vue.js简介

1.1　Vue.js是什么　1

1.2　为什么要用Vue.js　2

1.3　Vue.js的Hello world　2

第2章　基础特性

2.1　实例及选项　5

2.1.1　模板　6

2.1.2　数据　7

2.1.3　方法　9

2.1.4　生命周期　10

2.2　数据绑定　12

2.2.1　数据绑定语法　13

2.2.2　计算属性　17

2.2.3　表单控件　18

2.2.4　Class与Style绑定　21

2.3　模板渲染　22

2.3.1　前后端渲染对比　23

2.3.2　条件渲染　23

2.3.3　列表渲染　25

2.3.4　template标签用法　27

2.4　事件绑定与监听　28

2.4.1　方法及内联语句处理器　28

2.4.2　修饰符　29

2.4.3　与传统事件绑定的区别　30

2.5　Vue.extend()　31

第3章　指令

3.1　内置指令　32

3.1.1　v-bind　32

3.1.2　v-model　33

3.1.3　v-if-else-show　33

3.1.4　v-for　33

3.1.5　v-on　34

3.1.6　v-text　34

3.1.7　v-HTML　35

3.1.8　v-el　35

3.1.9　v-ref　35

3.1.10　v-pre　36

3.1.11　v-cloak　36

3.1.12　v-once　37

3.2　自定义指令基础　37

3.2.1　指令的注册　37

3.2.2　指令的定义对象　37

3.2.3　指令实例属性　39

3.2.4　元素指令　40

3.3　指令的高级选项　41

3.3.1　params　41

3.3.2　deep　42

3.3.3　twoWay　43

3.3.4　acceptStatement　44

3.3.5　terminal　44

3.3.6　priority　45

3.4　指令在Vue.js 2.0中的变化　46

3.4.1　新的钩子函数　46

3.4.2　钩子函数实例和参数变化　46

3.4.3　update函数触发变化　47

3.4.4　参数binding对象　47

第4章　过滤器

4.1　过滤器注册　48

4.2　双向过滤器　49

4.3　动态参数　50

4.4　过滤器在Vue.js 2.0中的变化　51

第5章　过渡

5.1　CSS过渡　52

5.1.1　CSS过渡的用法　52

5.1.2　CSS过渡钩子函数　54

5.1.3　显示声明过渡类型　57

5.1.4　自定义过渡类名　57

5.2　JavaScript过渡　58

5.2.1　Velocity.js　58

5.2.2　JavaScript过渡使用　58

5.3　过渡系统在Vue.js 2.0中的变化　59

5.3.1　用法变化　59

5.3.2　类名变化　60

5.3.3　钩子函数变化　61

5.3.4　transition-group　63

第6章　组件

6.1　组件注册　65

6.1.1　全局注册　65

6.1.2　局部注册　66

6.1.3　注册语法糖　67

6.2　组件选项　67

6.2.1　组件选项中与Vue选项的区别　67

6.2.2　组件Props　68

6.3　组件间通信　71

6.3.1　直接访问　71

6.3.2　自定义事件监听　72

6.3.3　自定义事件触发机制　72

6.3.4　子组件索引　75

6.4　内容分发　76

6.4.1　基础用法　76

6.4.2　编译作用域　77

6.4.3　默认slot　78

6.4.4　slot属性相同　79

6.4.5　Modal实例　79

6.5　动态组件　82

6.5.1　基础用法　82

6.5.2　keep-alive　83

6.5.3　activate 钩子函数　84

6.6　Vue.js 2.0中的变化　85

6.6.1　event　85

6.6.2　keep-alive　86

6.6.3　slot　87

6.6.4　refs　87

第7章　Vue.js常用插件

7.1　Vue-router　88

7.1.1　引用方式　88

7.1.2　基本用法　89

7.1.3　嵌套路由　90

7.1.4　路由匹配　92

7.1.5　具名路由　93

7.1.6　路由对象　93

7.1.7　v-link　94

7.1.8　路由配置项　95

7.1.9　route钩子函数　96

7.1.10　路由实例属性及方法　99

7.1.11　vue-router 2.0 的变化　100

7.2　Vue-resource　104

7.2.1　引用方式　104

7.2.2　使用方式　105

7.2.3　$http的api方法和选项参数　105

7.2.4　拦截器　107

7.2.5　$resource用法　107

7.2.6　封装Service层　109

7.3　Vue-devtools　109

7.3.1　安装方式　110

7.3.2　使用效果　110

第8章　Vue.js工程实例

8.1　准备工作　111

8.1.1　webpack　111

8.1.2　vue-loader　113

8.2　目录结构　115

8.3　前端开发　117

8.4　后端联调　122

8.5　部署上线　124

8.5.1　生成线上文件　124

8.5.2　nginx　125

8.5.3　gitlab　126

8.5.4　jenkins　127

第9章　状态管理：Vuex

9.1　概述　130

9.2　简单实例　131

9.2.1　所需组件　131

9.2.2　创建并注入store　132

9.2.3　创建action及组件调用方式　133

9.2.4　创建mutation　134

9.2.5　组件获取state　135

9.3　严格模式　137

9.4　中间件　137

9.4.1　快照　138

9.4.2　logger　138

9.5　表单处理　139

9.6　目录结构　142

9.6.1　简单项目　142

9.6.2　大型项目　143

9.7　实例　145

9.7.1　state结构　146

9.7.2　actions.js　148

9.7.3　app.js　148

9.7.4　组件结构　148

9.7.5　base组件　152

9.7.6　展示结果　154

9.8　Vue.js 2.0的变化　155

9.8.1　State　155

9.8.2　Getters　156

9.8.3　Mutations　157

9.8.4　Actions　157

9.8.5　Modules　159

第10章　跨平台开发：Weex

10.1　Weex简介　161

10.2　Weex安装　162

10.2.1　ios环境安装　162

10.2.2　android环境安装　163

10.2.3　web端运行　164

10.3　Weex实例与运行　164

10.4　Weex基础语法　168

10.4.1　数据绑定　168

10.4.2　事件绑定　169

10.4.3　模板逻辑　169

10.5　Weex内置组件　170

10.5.1　scroller　170

10.5.2　list　171

10.5.3　Switch　172

10.5.4　Slider　172

10.5.5　wxc-tabbar　174

10.5.6　wxc-navpage　175

10.6　Weex内置模块　176

10.6.1　dom　176

10.6.2　steam　177

10.6.3　modal　178

10.6.4　animation　179

10.6.5　webview　180

10.6.6　navigator　181

10.6.7　storage　182

第11章　Vue.js 2.0新特性

11.1　Render函数　183

11.1.1　createElement用法　184

11.1.2　使用案例　185

11.1.3　函数化组件　186

11.1.4　JSX　187

11.2　服务端渲染　188

11.2.1　vue-server-renderer　188

11.2.2　简单实例　189

11.2.3　缓存和流式响应　191

11.2.4　SPA实例　193