内容简介

目前单页应用框架层出不穷，其中Vue.js是十分耀眼的项目之一，受到国内外开发人员的极度推崇。
《Web前端技术丛书：Vue.js快速入门》分为8章，内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等，最后还给出一个实战案例供读者了解Vue.js项目开发过程。
《Web前端技术丛书：Vue.js快速入门》适合Vue.js初学者、Web前端开发人员，也适合高等院校和培训学校的师生教学参考。


作者简介

申思维，软件行业老兵。stackoverflow.com分数13k，排名前3%。2001~2005年本科就读于华南理工大学计算机学院软件技术专业，毕业后在北京工作，经历了人力外派、私企、中等规模外包公司、顶外企和国内互联网知名企业。

目录

目录

第1章Vue.js概述1
1.1单页应用的出现1
1.2为什么要使用Vue.js2
1.2.1单页应用2
1.2.2知名的单页应用（SPA）框架对比5
1.2.3被腾讯和阿里巴巴所青睐9
1.2.4用到Vue.js的项目9
第2章原生的Vue.js10
2.1极速入门10
2.2实际项目11
2.2.1运行整个项目12
2.2.2HTML代码的部分18
2.2.3HTML代码的部分19
2.2.4js代码部分21
2.2.5小结25
第3章Webpack+Vue.js开发准备26
3.1学习过程26
3.1.1可以跳过的章节26
3.1.2简写说明26
3.1.3《Web前端技术丛书：Vue.js快速入门》例子文件下载27
3.2NVM、NPM与Node27
3.2.1Windows下的安装28
3.2.2Linux、Mac下的安装31
3.2.3运行31
3.2.4使用NVM安装或管理node版本32
3.2.5删除NVM33
3.2.6加快NVM和NPM的下载速度33
3.3Git在Windows下的使用34
3.3.1为什么要使用GitBash34
3.3.2安装git客户端35
3.3.3使用GitBash40
3.4Webpack41
3.4.1Webpack功能42
3.4.2Webpack安装与使用43
3.5开发环境的搭建44
3.5.1安装Vue.js44
3.5.2运行vue44
3.6Webpack下的Vue.js项目文件结构45
3.6.1build文件夹46
3.6.2config文件夹46
3.6.3dist文件夹47
3.6.4node_modules文件夹47
3.6.5src文件夹49
第4章Webpack+Vue.js实战50
4.1创建一个页面50
4.1.1新建路由50
4.1.2创建一个新的Component51
4.1.3为页面添加样式52
4.1.4定义并显示变量53
4.2Vue.js中的ECMAScript55
4.2.1let、var、常量与全局变量55
4.2.2导入代码：import56
4.2.3方便其他代码使用自己:exportdefault{..}56
4.2.4ES中的简写57
4.2.5箭头函数=>57
4.2.6hash中同名的key、value的简写58
4.2.7分号可以省略58
4.2.8解构赋值58
4.3Vue.js渲染页面的过程和原理59
4.3.1渲染过程1：js入口文件59
4.3.2渲染过程2：静态的HTML页面（index.html）61
4.3.3渲染过程3：main.js中的Vue定义62
4.3.4渲染原理与实例63
4.4视图中的渲染64
4.4.1渲染某个变量64
4.4.2方法的声明和调用65
4.4.3事件处理：v-on66
4.5视图中的Directive（指令）67
4.5.1前提：在directive中使用表达式（Expression）67
4.5.2循环：v-for67
4.5.3判断：v-if69
4.5.4v-if与v-for的优先级70
4.5.5v-bind72
4.5.6v-on73
4.5.7v-model与双向绑定75
4.6发送http请求77
4.6.1调用http请求78
4.6.2远程接口的格式80
4.6.3设置Vue.js开发服务器的代理81
4.6.4打开页面，查看http请求83
4.6.5把结果渲染到页面中84
4.6.6如何发起post请求85
4.7不同页面间的参数传递86
4.7.1回顾：现有的接口86
4.7.2显示博客详情页87
4.7.3新增路由88
4.7.4修改博客列表页的跳转方式1：使用事件89
4.7.5修改博客列表页的跳转方式2：使用v-link91
4.8路由92
4.8.1基本用法92
4.8.2跳转到某个路由时带上参数93
4.8.3根据路由获取参数94
4.9使用样式94
4.10双向绑定96
4.11表单项目的绑定99
4.12表单的提交102
4.13Component组件105
4.13.1如何查看文档105
4.13.2Component的重要作用:重用代码106
4.13.3组件的创建106
4.13.4向组件中传递参数108
4.13.5脱离Webpack，在原生Vue.js中创建component110

第5章运维和发布Vue.js项目112
5.1打包和部署112
5.1.1打包112
5.1.2部署114
5.2解决域名问题与跨域问题117
5.2.1域名404问题118
5.2.2跨域问题119
5.2.3解决域名问题和跨域问题120
5.3如何Debug122
5.3.1时刻留意本地开发服务器122
5.3.2看developertools提出的日志122
5.3.3查看页面给出的错误提示123
5.4基本命令125
5.4.1建立新项目125
5.4.2安装所有的第三方包125
5.4.3在本地运行126
5.4.4打包编译127
第6章进阶知识128
6.1js的作用域与this128
6.1.1作用域128
6.1.2this130
6.1.3实战经验131
6.2Mixin133
6.3使用ComputedProperties（计算得到的属性）和watchers（监听器）135
6.3.1典型例子135
6.3.2ComputedProperties与普通方法的区别136
6.3.3watchedproperty137
6.3.4ComputedProperty的setter（赋值函数)140
6.4Component（组件）进阶141
6.4.1实际项目中的Component142
6.4.2Prop144
6.4.3Attribute146
6.5Slot146
6.5.1普通的Slot147
6.5.2namedslot148
6.5.3slot的默认值149
6.6Vuex150
6.6.1正常使用的顺序150
6.6.2Computed属性154
6.6.3Vuex原理图155
6.7Vue.js的生命周期156
6.8最佳实践157
6.9EventHandler事件处理158
6.9.1支持的Event158
6.9.2使用v-on进行事件绑定159
6.10与CSS预处理器结合使用168
6.10.1SCSS168
6.10.2LESS169
6.10.3SASS170
6.10.4在Vue.js中使用CSS预编译器171
6.11自定义Directive172
6.11.1例子172
6.11.2自定义Directive的命名方法173
6.11.3钩子方法（HookFunctions）174
6.11.4自定义Directive可以接收到的参数174
6.11.5实战经验175
第7章实战周边及相关工具176
7.1微信支付176
7.2HybridApp：混合式App177
7.3安装Vue.js的开发工具：Vue.jsdevtool178
7.4如何阅读官方文档181
第8章实战项目183
8.1准备1：文字需求183
8.2准备2：需求原型图186
8.2.1明确前端页面186
8.2.2如何画原型图186
8.2.3首页186
8.2.4商品列表页187
8.2.5商品详情页187
8.2.6购物车页面188
8.2.7支付页面188
8.2.8我的页面189
8.2.9我的订单列表页面189
8.2.10总结190
8.3准备3：微信的相关账号和开发者工具190
8.3.1微信相关账号的申请190
8.3.2微信开发者工具190
8.4项目的搭建192
8.5用户的注册和微信授权193
8.6登录状态的保持202
8.7首页轮播图203
8.8底部Tab213
8.9商品列表页217
8.10商品详情页219
8.11购物车225
8.13微信支付233
8.14回顾244


前言/序言

　　前言
　　《Web前端技术丛书：Vue.js快速入门》是根据笔者公司过去两年多的实际项目经验编写的。
　　笔者从2016年经营自己的软件公司，到2018年6月，做了近三十个项目。这些项目中，对于手机端的Webpack呼声最高，大部分项目都要求在手机端使用Webpack打包。
　　在使用Vue.js之前，笔者考察过Angular（包括1.x、2.x版本)、React、Meteor，这几个框架都适合做快速开发。要么是学习曲线陡峭，概念复杂，把简单的事情复杂化（如Angular），要么就是编码风格不好，前后端代码混写在一起（如React、Meteor)。而Vuejs是当时在stackoverflow等国外技术站点上被一致看好的技术。
　　第一次使用Vuejs1.x是在2016年4月，我们发现Vue.js入门特别快，稍微有一定Webpack开发经验的程序员，在一周内就可以上手做项目，认真学习的话，一个月就可以达到熟练水平（快速的开发项目），两三个月就可以达到高级水平（熟练使用Vuex，自己写Component等）。这么快的上手速度，在其他语言中是不可想象的。根据笔者的实际体会，使用Angular入门仅需要一个月，使用React入门速度也没有这么快。总之，越是简洁的框架，就越好学。
　　后来，笔者在项目中使用它，一发不可收拾，只要是H5项目，就可以很好地用起来。快速开发，快速迭代，性能“杠杠”的。而且，额外的好处就是可以非常好地与NativeApp的开发结合。在iOS上可以做到完美呈现，让人无法分辨哪个页面是原生，哪个页面是H5制作的。
　　学习目标
　　《Web前端技术丛书：Vue.js快速入门》是笔者公司的员工培训教程，可以在极短的时间内（如一周）上手Vue.js项目。让读者：
　　看得懂代码。
　　可以写一些基本的功能。
　　可以调试和部署。
　　这就算入门H5开发了。
　　使用说明
　　如果把文档分成两类：
　　guide，教程型文档。
　　API，接口型文档。
　　本文档就是入门的教程式文档，在线查看地址为http://vue_book.siwei.me/。
　　《Web前端技术丛书：Vue.js快速入门》使用gitbook写成，可以自行编译（安装环境和编译命令可参考http://siwei.me/blog/
　　posts/gitbook-gitbook）。
　　《Web前端技术丛书：Vue.js快速入门》中出现的命令行统一以$作为开始。例如：
　　$npminstallvue-cli
　　对命令行不熟悉的读者，在写命令时跳过前面的$即可。
　　源代码下载
　　《Web前端技术丛书：Vue.js快速入门》中所有的示例源代码，都可以在https://github.com/sg552/happy_book_vuejs上找到。
　　版本说明
　　截至2018年6月底，Vue.js的版本是2.5.16。《Web前端技术丛书：Vue.js快速入门》中的大部分示例都是在该版本下演示的。
　　如果您是一位没有任何工作经验的新人，在Windows环境下，建议使用sublime（免费）+gitbash（免费），就可以运行《Web前端技术丛书：Vue.js快速入门》中的所有例子了。如果您是一名有工作经验的老鸟，那么Linux、Mac则是非常好的选择。
　　那么，我们就开始一段令人兴奋的学习历程吧。
　　编者
　　2018年9月

其他推荐