goods 商品列表页开发
布局编写
除了商品之外还有购物车，还有个详情页，挺复杂的。
两栏布局：左侧固定宽度，右侧自适应，还是用flex。
因为内容可能会超过手机高度，超过就隐藏。左右两侧的内容是可以上下滚动。
good.vue：
为了兼容性问题呢，设置flex之后还设置了宽度，使得在不兼容flex的浏览器也能有80px的宽：
外壳就是这样了：
开始填内容了
同样的，我们还是利用vue-resource这个技术去拿到数据，获取goods数据：
goods需要用data去绑定，因为后面需要用到goods的数据在DOM上，需要添加getter，setter
也就是一开始这个goods为空，然后通过vue-resource获取。
左侧menu布局
还有个type字段，跟上一节的support是相似的。
接着写样式：
我们看到：
这里有一个需求，它需要垂直居中，那多行的怎么办呢？用table，table是垂直居中最好的布局。
右侧食品列表布局
食品列表是跟分类是有对应关系的，每一个分类有对应的标题，还有分类下所有的商品，这个商品有可能是数组。
关于右侧列表食品的标题样式
食品样式，因为图片右边的文字介绍的宽度是自适应的，所以还是会用到flex布局。
在每一个内容里面都有1像素，但是最后的元素是没有1像素的，所以应该去掉
在mixin.styl里：去掉1像素
在goods.vue
因为上下两个item中体格的向下margin跟另一个向上margin会重合，所以这里还要设置padding：
但是在最后一个的话它就会有显示了，所以要置为0：
接下来就来让这两块滚动
better-scroll运用
https://github.com/ustbhuangyi/better-scroll
inspired by iscroll, and it has a better scroll perfermance
作者为什么重写呢？因为iscroll已经很久没人维护了，bug也没人修复。
同样在package.json引入
因为这个库需要获取DOM，所以用vue2.0中的ref属性。
https://segmentfault.com/q/1010000007523462
http://www.sunzhongwei.com/how-to-get-input-value-in-vuejs
这里ref属性用的是等于号。
测试一下：
定义_ini()这样一个方法并且打印出来，执行就成功了。
这时可以查看元素：
已经添加一些样式了，但是还不能滚动，为什么呢？因为它在计算高度的时候，当我们去初始化这个BScroll的时候，它的DOM在vue更改数据的时候会跟着做映射，但实际上vue在更新这个DOM的时候是一个异步的，在回调里面更新，所以这里虽然改变了数据，但是DOM仍然没有变化，这是去初始化它的时候对它高度的计算就会有问题，所以这里需要用vue一个接口：
这样就可以滚动了。原理就是获得高度数据之后跟wrapper的高度作比较，大于就可以滚动。
接下来就是右边滚动时左边有高亮。
我们依赖的就是右边滚动的时候实时变化的Y值，也就是纵坐标。Y轴落到哪个区间左边就对应哪个区间。
要知道Y值落在哪个区间，就要知道每个区间的高度。
首先先计算整体区间的高度：用数组记录各个区间的高度，记录之后在监听这个滚动的时候能实时拿到这个Y坐标，然后去对比这个坐标落到那个区间，然后就可以得到当前左侧高亮的索引值是多少，然后在利用vue的class绑定把这个高亮的效果给写出来。
计算右侧索引的高度：
就在拿到数据后边去计算：
定义一个方法，这个方法用一个变量去存它，它是一个数组，是Y轴累加的过程
可以添加一个class：food-list-hook，用来被JS选择。
let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
第一个先存height=0，然后在累加每个区间
然后再实时拿到当前右侧的Y值，跟左侧索引做一个映射
定义一个变量：scrollY，并且跟踪它：
scrollY的变化就很简单。利用better-scroll的一个事件接口。
滚动的时候实时拿到这个scrollY：
接下来就要跟左侧做映射：
就要用到vue的计算属性
获取当前索引
设置样式，当currentIndex等于index是就设置样式，class=current：
接下来再实现左侧的点击功能
需要加一个click属性。
为了让移动端和PC端点击一样（PC端会触发两次）
这样就满足了：因为那个event的属性在PC端是没有的，这样就不用执行两次了。
最终：
总结：
当我们在写vue的开发应用的时候，遇到了某些好原生的库做交互的时候要注意几个点：
1、通过定义ref这个属性去访问到DOM，就可以拿到它了
2、this.$nextTick()这个借口：当我们想要去计算跟一些DOM相关的东西的时候，我们一定要把这个DOM渲染在里面，因为在VUE里面，虽然说DOM是数据的自然映射（改变数据就改变DOM），但是DOM真正发生变化其实是在nextTick这个回调函数后。所以在操作原生DOM的时候一定要调用这个借口。
购物车
设计稿：
这个会有多种状态。比如购买的话购物车的图标会亮，超过20元的话20元起送的区块会亮。
接下来我们就来创建一个购物车组件shopcart.vue ：
然后在引入到good.vue组件，并在component注册
这样就可以写入了<shopcart></shopcart>
可以在查看元素看到shopcart这个组件：
接下来就来开发它的布局
可以看到，购物车右边content-right的宽度是固定的，左边content-left的宽度是自适应的。所以还是用flex布局。
因为购物车会一直在底部，所以要fixed定位，shopcart还要设置z-index，因为会有多层。
购物车图标Logo-wrapper这个区块会超出，所以需要设置宽高和定位，而且这里的box-sizing: border-box，还要设置个background: #141d27才看得到。
这里有个细节：就是class=”price”这个元素居中使用的是：
margin-top: 12px line-height: 24px
为什么不直接用line-height呢？因为这个price后面还有一个间隔线，需要用margin。
class=desc元素中的配送费是从父组件传过来的，所以在good.vue初始化shopcart组件时可以传入一些参数。传个配送费和起送费
这样就可以在shopcart.vue用了
但是还是报错了：
是因为我们要在外层的app.vue中传入seller数据，这样我们才可以在goods.vue组件获得这个seller
这样问题就解决了。
但是呢，这里的数据没有显示：
这是因为我们还要在shopcart.vue接受这个seller，否则是没有用的
这样数据就是通过一层层地传递，通过router-view把seller传到goods.vue组件，再由good.vue再把seller穿戴shopcart.vue组件，shopcart.vue拿到这个变量就可以用了。
还有个“起送价”的区块
这样基础样式就搞定了：
接下来就要给购物车添加状态，这些状态是对选择商品有一个映射。这里选择多少商品也是通过props去获取父组件的数据，毕竟你是在父组件选择商品的而不是在购物车选择商品的
这里的default就是个函数了。因为在vue.js里面，如果props是一个Array或者Object，default就需要是一个函数。
计算总价：
这样就可以了。
再给它写入一些数据测试一下：
接下来还有为购物车的状态添加一些样式
所有这些状态变化都是与selectFoods的数据相关的，比如：
再添加一些值，购物车就会变化：
这里照样还是要计算，先计算一个totalCount，表示所有商品的总和。就是对selectFoods里面拿到的count做累加。
这时候需要在模板里面再写一个div来显示这个totalCount：
结果：
接着：购物车的totalCount大于0时就会高亮：
还有price也要加高亮，跟上面相似。
这里还有一个细节：购物车清空的话，上面的小红标也要去掉，这里需要加v-show：
还有右边的content-right
它有三种状态，当没有商品的时候，它是初始状态；接着选了商品之后是显示还差多少元起送；最后达到起送价是显示高亮“去计算”。
这里依然用计算属性去描述它
补充：ES6对字符串的拼接有个扩展，就是用” ` ”，引号反过来写。
接下来就是样式了
还需要绑定class，因为这里有两个状态，所以这里可以绑定一个变量。一个是起送价还没到的原始状态，另一个是商品价格超过起送价的高亮状态：
并且计算属性：
这样就完成了 ，这个过程都在围绕父组件传过来的selectFoods进行状态变化，这里vue数据驱动确实带来很多方便。
接下来就要添加按钮了，因为项目中多次用到，所以也要抽象成一个组件cartcontrol.vue
这个按钮是和商品有关联的，也有个数。所以这个cartconcontrol组件要接受一个数据。也就是说，我们调用这个购买组件的时候，要传入关联的food，因为我们去给它增加和删除都是关联它的个数food.count.
在good.vue引入组件。
有的按钮有时是不会显示的，比如food.count为0的时候，减号按钮和数值不会显示：
在goods.vu e组件中，我们还要给它包装一层div，因为还得设置样式呢。而且还要把food对象传入
可以在查看元素里面看到很多对象。
接下来添加样式：
有个技巧性东西，就是因为按钮很小，所以我们来增加padding，让它的点击区域变大，增加用户体验。
在goods.vue组件添加样式
接下来写逻辑：点击加好food.count会加1，并且减号和数字显示
但是这样点击会没有响应，因为我们这个addCart是在food-wrapper面板里面，那这个面板是使用better-scroll插件，这个在移动端点击的话需要给他在初始化better-scroll的时候传一个参数。这就需要在goods.vue组件添加click：true
同样的，这样点击的话在PC端也会点击一次又两次响应。
所以还是老办法，通过event去判断
这样就只有一次了。
但是页面上的减号却没有出来。这其实是vue.js的一个特性，也就是说当我们去给一个观测对象添加一个它不存在的字段的时候(比如food.count)，我们这样直接赋值是不可以的，它是检测不到增和减的变化的。所以在新增和删除某个字段的时候，我们想要它观察到这个变化，我们就需要用一个接口，先cartcontrol.vue引入全局的vue。
然后就用vue.set这个接口，这样就能被观测到
数字的样式：
接下来实现减的逻辑
这样就搞定了
现在把按钮和购物者关联起来
当我们使用cart按钮时，修改的是food.count属性，这里的food是父组件传过来的对象
当我们更这个对象增加属性（count），也就修改对象本身，它就会影响父组件good.vue。在调cart的时候需要传selectFood
就是去遍历，然后获得foods，这个foods是什么呢？
然后点击加号，就会有
就是先把foods清空，然后在遍历全部商品，再将得到的商品分组继续遍历，将有选择的加入到foods数组，这样再把foods数据传给shopcart.vue
这里的foods数组中的每一项都是一个完整地food对象，所以不仅仅包括price和count。
总之，这个过程就是将shopcart组件和cartcontrol组件的数据结合起来。 计算属性selectFoods观测goods对象，一旦goods对象发生变化（因为我们在之前用到foods.count，有变化就说明goods变化），就会被重新计算，把逻辑重新执行一遍，并且遍历每一个单个的food，有count的话就说明这个food被我们选择了，这时就加入数组。
流程大概就是这样：在cartcontrol.vue中，我们会通过点击按钮去改变food.count --> goods.vue监听到可也会改变相应的数据,也就是选择的数据 --> selectFoods会遍历所有food对象并把有变化的数据对象加入到数组中 --> shopcart.vue检测到这些数据的变化就会获取并呈现在购物车。