better-scroll滚动条
使用作者自制的better-scroll库，实现内容的滚动。
先在package.json加上依赖：
"better-scroll": "^0.1.7"
接着再npm install安装依赖。
import BScroll from 'better-scroll';
this.menuScroll = new BScroll(this.$refs.menuWrapper, {
click: true
})
上面BScroll就是这个滚动条的类，第一个参数是一个需要内容物滚动的DOM对象，第二个参数是滚动条的选项Options，是以JSON类型承载的。
然后我们就可以使用它来和DOM绑定了。值得注意的是，在BScroll中绑定的DOM叫this.$refs.menuWrapper，它所指向的是这个Vue页面中的所有的拥有ref属性的标签中名字为menuWrapper的那个，如下图。
<template>
<div class="goods">
<div class="menu-wrapper" ref="menuWrapper">
...
接着就可以把this._initScroll();这句代码加入到created()中：
created() {
this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
axios.get('/api/goods')
.then(response => {
const result = response.data;
if (result.code === OK) {
this.goods = result.data;
this._initScroll(); // 加在这里，但却无法实现滚动效果
}
});
},
无法滚动的原因是因为。Vue在计算高度的时候，当我加入BScroll的之后，Vue没有要跟着数据的更改做映射（当Vue在更新这个数据的时候是异步更新的，它将把一切更改都放在队列里等待），因此DOM没有变化，不能渲染出来。导致初始化BScroll()的时候，高度的计算就会有问题。
因此我们要使用Vue里面一个叫nextTick()的方法（要import Vue from 'vue';），数据变化后能够马上引起Vue的更新，能够让BScroll在数据更改后随着Vue的下一个回调的进行实时更新。
created() {
this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
axios.get('/api/goods')
.then(response => {
const result = response.data;
if (result.code === OK) {
this.goods = result.data;
// 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
Vue.nextTick(() => {
// 初始化滚动条
this._initScroll()
// 读取右侧所有分类的top值
this._initTops()
})
}
});
},
v-for是一个能够实现返回多个参数的遍历语法。
<div v-for="(value, name, index) in object"> // 顺序必须为value第一，后面再接上name或者index
{{ index }}. {{ name }}: {{ value }}
</div>
出来的效果就是
0. title: How to do lists in Vue
1. author: Jane Doe
2. publishedAt: 2016-04-10
证明index返回的是当前JSON元素的位置（索引），name返回的是当前元素的key即键的字符串，value返回的就是当前元素值的字符串。
总结一下：
- 在和浏览器DOM的原生一些库进行交互的时候可以定义ref（或v-el）来在js中用
this.$refs.xxx（或this.$els.xxx(）访问到它。访问到它就相当于拿到了一个原生DOM。 - 还有要知道nextTick()这个接口。当我想要计算一些DOM相关的东西的时候，我们必须保证这个DOM已经渲染了。因为在Vue里面虽然说DOM是数据的自然映射，我们改变了数据就改变了DOM。但是其实DOM真正发生变化，其实是在这个nextTick()的回调函数执行后。所以我们在操作相关原生DOM的时候，我们一定要调用这个接口，然后在这个回调函数里做任何事情。这样做是非常安全的，这样能保证DOM良好，这样在计算DOM的一些值的时候就不会出错了。