Vue作为最流行的前端框架,是80%企业前端招聘的首选。但在学习Vue时,面临的学习曲线的往往是陡峭的,时不时会遇到一座山峰或一个深坑,结果很长时间也无法逾越,导致逐步丧失了学习的信心。本书的宗旨是抹平Vue学习曲线,就是在攀登Vue这座高峰时,提供梯子和索道,或者干脆提供一辆缆车。从而在领略Vue高峰上无限风光的时候,不用在崎岖山道艰难跋涉,而是像似漫步在平坦的大道上。

Vue是中国人尤雨溪所开发的软件,在github上的星数远超Angular,直逼React,最受国人青睐,80%以上的企业前端招聘,都要求会Vue开发,由此可见其技术的先进性和实用性。

Vue如此受青睐,因为其采用模块化、渐进式编程思想。所谓模块化,就是化繁为简,把复杂的页面应用变成简单的可重复利用的组件,每个组件相当于一块积木;所谓渐进式,就是“主张最少”,逐步推进,像搭积木一样,由简单到丰富,体现的是由简入繁思想。Vue模块界定清晰,组件拼装简单,由繁入简,由简入繁,毫无违和感。

作为一门前端开发技术框架,所建立起来的技术体系和概念,并不都是那么易懂易用。因此本教程带领您来学习Vue使用技巧的同时,会形象生动地解释那些晦涩难懂的概念,并通过代码示例来展示其效果。当彻底理解了这门语言的那些难懂的概念时,学习的曲线就被抹平了。孔子曰:学而无坑之,不亦说乎。

详细内容参考:https://gitee.com/yinzi2016/vue-study/

目 录.... 2

前 言.... 8

内容提要.... 8

第一部分 Vue入门篇.... 9

第1章 Vue起步知识.... 9

1.1 从Hello World开始.... 9

1.2 Vue的核心概念MVVM... 11

1.3 模板语法.... 16

1.4 计算属性.... 21

1.5 侦听属性.... 24

第2章 Class 与 Style 绑定.... 25

2.1 绑定HTML Class. 25

2.2 绑定Style样式.... 27

第3章 Vue事件处理.... 27

3.1 事件监听.... 28

3.2 事件处理方法.... 28

3.3 事件修饰符.... 29

3.4 按键修饰符.... 30

3.5 按键码.... 30

3.6 系统修饰键.... 31

3.7 .exact 修饰符.... 31

3.8 鼠标按钮修饰符.... 31

第4章 表单输入绑定.... 32

4.1 基本用法.... 32

4.2 值绑定.... 35

4.3 修饰符.... 36

第5章 Vue基本特性.... 36

5.1 Vue的options对象... 36

5.2 Vue生命周期函数.... 46

5.3 Vue的MVVM原理.... 48

第二部分 Vue高级篇.... 51

第6章 ES6基础学习.... 51

6.1 搭建ES6的开发环境.... 51

6.2 ES6的块级作用域和let,const,var区别.... 52

6.3 ES6的解构赋值... 53

6.4 ES6 的Symbol原始数据类型... 54

6.5 ES6 Map 与 Set 55

6.6 ES6 Reflect 与 Proxy. 58

6.7 ES6字符串.... 61

6.8 ES6对象增强写法——字面量... 62

6.9 ES6的数组.... 62

6.10 ES6的函数.... 63

6.11 ES6 的迭代器.... 65

6.12 ES6的类.... 66

6.13 ES6的模块.... 68

6.14 ES6的Promise 对象——异步编程的方式... 68

第7章 Vue组件基础.... 70

7.1 Vue组件化思想.... 70

7.2 组件化开发步骤.... 71

7.3 父子组件.... 73

7.4 父子组件数据访问方式——Props. 75

7.5 父子组件双向绑定props案例.... 83

7.6 父子组件双向数据绑定watch案例... 85

7.7 父子组件的访问.... 86

7.8 自定义事件.... 90

第8章 Vue组件进阶.... 93

8.1 Vue的插槽slot学习.... 93

8.2 Vue模块化开发.... 98

8.3 组件的高级特性.... 104

8.4 Vue组件常用的7种通信方式.... 108

第9章 webpack 编译打包工具.... 114

9.1 webpack 的由来.... 114

9.2 webpack的初步使用.... 114

9.3 webpack的基本配置.... 116

9.4 webpack的loaders基本使用... 117

9.5 webpack的插件基本使用... 121

9.6 用webpack搭建本地服务器.... 122

9.7 使用webpack开发Vue示例.... 123

9.8 Vue中el和template的关系... 125

第10章 Vue动态组件、异步组件.... 127

10.1 动态组件.... 127

10.2 异步组件.... 128

第11章 Vue CLI脚手架.... 135

11.1 Vue CLI4的安装.... 136

11.2 Vue CLI4创建项目.... 137

11.3 项目架构介绍.... 140

第12章 Vue-Router 148

12.1 vue-router的基本知识.... 148

12.2 vue-router的基本使用.... 149

12.3 vue-router的应用示例.... 150

12.4 router-link参数详解.... 151

12.5 动态路由解析.... 154

12.6 动态路由通过代码方式实现.... 157

12.7 路由懒加载.... 159

12.8 路由嵌套.... 160

12.9 导航守卫.... 161

12.10 keep-alive. 166

第13章 VueX.. 166

13.1 VueX的使用.... 167

13.2 VueX的示例学习.... 169

13.3 VueX的核心概念.... 172

13.4VueX的原理浅析... 178

第14章 网络请求axios. 179

14.1 axios请求方式.... 179

14.2 axios的基本使用.... 181

14.3 axios的常见配置.... 183

14.4 axios在Vue项目应用.... 186

14.5 axios的简单封装.... 188

14.6 axios的拦截器封装... 189

第三部分 Vue项目实战篇.... 191

第15章 移动端项目架构开发.... 191

15.1 创建项目和Github托管.... 191

15.2 使用mockjs来模拟后台数据.... 196

15.3 项目初始配置.... 201

15.4 重要的框架性文件.... 204

第16章 移动端项目功能开发.... 212

16.1 开发底部导航和顶部导航.... 213

16.2 开发首页Home页面.... 217

16.3 开发分类Category页面... 234

16.4 开发购物车Cart页面.... 252

16.5 开发我的Mine页面.... 257

第17章 PC端项目架构开发.... 261

17.1 ElementUI的安装及引用... 261

17.2 项目概述.... 261

17.3 项目初始化.... 262

17.4 项目目录规划.... 265

第18章 PC端项目功能开发.... 265

18.1 登录功能模块.... 266

18.2 左侧菜单导航功能实现... 278

18.3 布局文件功能实现.... 293

18.4 商品列表功能实现.... 302

18.5 商品添加功能实现.... 306

18.6 商品分类列表功能实现... 309

第四部分 Vue面试题.... 313

第19章 Vue面试题.... 313

19.1 Vue指令面试题.... 313

19.2 Vue生命周期函数面试题.... 316

19.3 Vue原理相关面试题.... 316

19.4 Vue插件相关面试题.... 324

19.5 webpack/vuecli相关面试题.... 324

19.6 Vue组件相关面试题.... 327

19.7 VueX相关面试题.... 327

19.8 Vue-Router相关面试题... 328

19.9 axios相关面试题.... 330


 

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐