header组件
vue-resourse应用
https://github.com/pagekit/vue-resource
vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为，比如使用inteceptor在ajax请求时显示loading界面。
vue-resource插件具有以下特点：
1. 体积小
vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。
2. 支持主流的浏览器
和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。
3. 支持Promise API和URI Templates
Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。
URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。
4. 支持拦截器
拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。
http://www.cnblogs.com/keepfool/p/5657065.html
Header组件：商家数据，通过异步请求后端的数据接口获得的，header组件就负责接受这样的数据并渲染 。那我们就可以在app.vue组件（header的父组件），通过发送一个AJAX请求去获取商家的相关数据，然后把这些数据通过header的prop属性传递给这个组件。
可以查看：http://cn.vuejs.org/v2/guide/components.html#example-2-5
父子组件间的通信
组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。
在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。
使用 Prop 传递数据
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。
prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项声明 “prop”：
Vue.component('child', { // 声明 props props: ['message'], // 就像 data 一样，prop 可以用在模板内 // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '<span>{{ message }}</span>' })
然后向它传入一个普通字符串：
<child message="hello!"></child>
结果输出“hello”。
回到项目中来
首先我们需要给app.vue定义一个seller的对象：可以通过data()方法。在vue.js中，这个data属性是一个函数（可查看链接），因为组件是可以被复用的，如果定义一个对象然后修改某一个组件的话会影响另外的组件，所以这里定义成一个函数。这个函数return一个对象，对象里面有seller对象，先定为空，然后我们通过发送AJAX请求去拿到一个seller对象，然后send给它。这样就可以拿到seller对象的数据。
Vue.js社区有个第三方插件：vue-resource，用来处理一些前后端请求数据交互的。
示例：
{ // GET /someUrl this.$http.get('/someUrl').then((response) => { // success callback }, (response) => { // error callback }); }
同样的，在package.json添加它的依赖：
第三方插件import引用时需要注册，用Vue.use(vueResource)把这个注册。在main.js注册
然后回到app.vue，在这里我们需要通过一个vue.resource去发送一个AJAX请求，需要在什么时序去发起呢？
我们知道每个vue实例化的时候都有一个生命周期，其中有个钩子叫created().
关于钩子：https://segmentfault.com/q/1010000004335505
关于实例的生命周期：https://cn.vuejs.org/v2/guide/instance.html#实例生命周期
这是它的一个生命周期钩子函数，就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个html元素上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个钩子函数，方便开发者在不同阶段处理不同逻辑。一般可以在created函数中调用ajax获取页面初始化所需的数据。
能够看到这里已经发送了：
还有很多字段：每个字段都有get和set方法：
到这vue-resource就介绍完了，seller对象已经拿到，接下来就把seller对象传递给header组件，让header渲染即可。
外部组件
vue2.0组件间通信：http://blog.csdn.net/qq_24122593/article/details/53509229
上一讲从后端的seller API获得这个seller对象，现在就来把这个seller对象传给header组件
https://cn.vuejs.org/v2/api/#props
通过v-bind指令去传，把这个seller这个变量传给这个header组件。
我们在header组件里面就会通过propS属性去接受传过来的seller。
有了这个变量就可以来写它的DOM结构了。
<img width="64" height="64" src="seller.avatar">
这样不行，不能直接指定src。需要用v-bind，这样才可以去引用头像图片的地址，因为seller.avatar一开始是不存在的
再写写样式
有的层之间会有空隙，需要怎么处理呢？方法有很多，这里使用font-size。可以先把父级的font-size设为0，再设置本身的font-size。
图片的2x和3x是对应不同的dpr的。需要用到媒体查询，代码比较多，写在mixin.styl。
减价、打折、特价等图标需要根据后台返回的数据来选择，所以这里就得根据后台返回的数据修改class，这是需要动态绑定
为了将它的数值对应到各自的含义，可以定义一个classMap:
然后再动态添加class的值：
想要变化：减价变成特价。可以去后台该数据的顺序：
接下来写右下角的“5个”：
<i class="icon-keyboard_arrow_right"></i>
这个小图标用到的是字体图标。
关于公告区：
为了清除间隙还有不影响省略号，我们就不用font-size为0了，用其他方法，就是元素紧贴一起。
设置对齐的时候，可以先设置顶部对齐：vertical-align: top，再进行调整
背景图：
Image标签设置它的容器的filter。
背景置于容器的顶部：
position: absolute top: 0 left: 0 z-index: -1
接下来：内部弹层详细页
要求：全屏、模糊、底部还有关闭按钮，而且，高度可能比手机高度还高，这是就会有滚动条。
关闭按钮在最下方，如果用普通的布局的话，就会盖在文字上面，这显然不行。这时就要用到css striky footers布局。相对窗口做fixed布局
最外层：
.detail position: fixed z-index: 100 top: 0 left: 0 100% height: 100% overflow: auto background: rgba(7,17,27,0.5)
控制显示和隐藏，在vue里面可以通过v-show指令去控制，还要给vue的实例里面加一个选项data，它是一个function，因为可能会有多个实例组件。这个function会return一个object，会去跟踪依赖一些变量。
data() { return { detailShow: false }; },
也就是说，我们在new这个vue的时候，它会对data里面的变量去编译然后给它添加getter和setter，这样当我们的变量变化的时候，DOM就会跟着变化。
查看元素：
这是就要添加方法了：
showDetail() { this.detailShow = true; },
也就是说当我们去点击这个层的时候，会调用这个方法去改变detailShow，由于这个变量是依赖跟踪的，他就会访问到data里的detailShow，变化的时候vue也可以检测到，最后会通知这个DOM的指令，然后更新状态。
就是这样，用过vue去操作数据，从而改变DOM的状态，这过程我们并没有去操作DOM。
接下来写详情页里面的内容了，布局是个问题
讲一下sticky footers：http://www.tuicool.com/articles/rEbQjaM
Sticky footers可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。
有很多种方案，这里作者介绍一种比较复杂的但是兼容性好的方案。
定两层，上一层要清除浮动：
最终套路：
detail-wrapper层要让它的最小高度撑满整个屏幕的，按钮才会定在最下面。内容层有个padding-bottom，关闭层有个margin-top，就是为了向上提。
还要在base.styl添加清楚浮动的代码。
detail-main是内容区块，向上需要有margin-top，向下有padding-bottom。
detail-close也是用到图标字体，这里还有一个重要的点：相对定位，然后向上的负margin-top，还要清除浮动。不管内容再多，关闭按钮仍然能够定在底部，padding-bottom很关键。
接下来添加内容
不可能这样整张图吧，因为如果评分多的话，有100分呢，那么这样的图片不得有上百行。而且项目也多处有星星，所以这样可以弄一个组件star.vue。而且把图片都单独切开，这样不管什么状态都只有这么多图片。
为了有更好的扩展性，并且足够灵活，我们要利用vue里面的v-for的指令，根据我们定的星星个数去遍历它。
并且，由于这里的star有不同尺寸，所以也有不同样式，所以就用一个v-bind绑定class。
首先，star有不同的尺寸，这个尺寸的大小是由外部数据传进来的，所以需要对外提供接口，可以传过来变量，告诉你star的尺寸是多少，得分又是多少。
这个过程主要还是两方面：根据得分给星星，星星尺寸也不同。
这里还需要一个公式来根据传过来的尺寸分数映射一个类型。
就比如传进来的size是24，那么计算之后就得到star-24，这是就可以设置size-24的相关样式了。
再添加不同类型尺寸的star的样式。
接下来就是star的遍历了，它是一个数组，要得出需要多少个star。取整再除2，再取整数部分和小数部分。
因为半星只会有一个，所以只需一次push
长度不到5就补全。
itemClasses() { let result = []; let score = Math.floor(this.score * 2) / 2; let hasDecimal = score % 1 !== 0; let integer = Math.floor(score); for (let i = 0; i < integer; i++) { result.push(CLS_ON); } if (hasDecimal) { result.push(CLS_HALF); } while (result.length < LENGTH) { result.push(CLS_OFF); } return result; }
接下来回到header组件去引入了，然后注册。注册之后就可以在DOM用这个标签了。
Star标签它是要传两个参数的。
Tract-by：https://segmentfault.com/q/1010000005143763
查看元素：
还要在header.vue组件中设置他们的样式，比如边距什么的，当然不能放在组件里面，如果这样就受限了。我们可以在在外层去包装它的容器，然后在定义它的内边距啊、高度等等
优惠公告：
这也是一个经典的布局问题：线的宽度是自适应，文字居中。文字与线之间的空隙也要有半透明的背景，这里会用移动端常见的布局flex。
Flex布局：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
一般有两层，父元素display：flex子元素指定flex。
这里为什么子元素用div呢？因为用span的话在Android某些浏览器会有问题。
关于代码中CSS的样式兼容问题：我们并无需全部写出，因为有工具帮忙完成：
接下来写优惠信息详细内容：
这块内容跟我们外层的.support是相似的。
但是vue2.0中的index这样用，请查看：http://cn.vuejs.org/v2/guide/list.html#v-for
接下来再添加详细介绍，添加按钮的关闭功能。
还可以添加动画，我还没添加。
https://vuefe.cn/v2/guide/migration.html#过渡
https://segmentfault.com/q/1010000007738500
还有一点就是：在设计稿上可以看到，它的背景是模糊的，和刚刚图片模糊是完全不一样的。这个模糊只有在IOS上才能实现，它的实现是通过一个backdrop-filter: blur(10px)
下一张就到了商品这个组件了，这个组件才是大大发挥vue的优势。