Vue实现类似通讯录功能（上）

不是很好描述这种功能，大概和通讯录一样，按名称分组，右侧有字母列表，可进行选择。

就是这个样子的

（贴图出来比较一目了然）

使用Vue实现，这里需要安装一个插件better-scroll，安装引入流程可进上面链接的github上，按要求完成便可。

script部分这样写

模板部分记得要按照要求来写模板，然后将想要滑动的部分，通过 ref获取 dom结构。

静态布局部分要自己好好写，这里就不说啦。

动态数据渲染

我这里写的是城市选择列表，但是功能和通讯录是一样的，首先在城市父组件内引入axios，引入这个是为了发起ajax请求。

我是差不多的操作

然后在mounted这个钩子函数内，发起ajax请求，也可以写在created这个钩子函数内，但是最好写在mounted内。
然后请求函数的具体执行函数写在methods内，handleGetCityInfoSucc是成功接收的回调函数。这里的操作是先把返回结果打印出来。

我是返回结果

接下来去data部分创建两个变量，一个cities 是个对象，一个hotCities是个数组，默认都为空。
然后将返回结果赋值给它们。

我是赋值操作

接下来就是父组件传值给子组件。
父组件通过绑定属性传递给子组件

绑定了两个属性

然后子组件去接收它们

接收它们

通过props接收它们，定义好类型。

写好对应循环

然后找对应的模板进行修改。
红框部分是一个两层循环，为什么是两层循环呢？
返回的cities，内部是一个对象，'A'，'B'，'C'... 这些是它的 key，它们的值是数组形式

第一层循环

数组内部又是若干个对象组成

第二层循环

【PS】对象也可以用 v-for循环，但是它的第二项就不是 index了，而是 key，这里的 key就是 A、B、C...

第二层循环是第一层的item的内部循环，所以图中第二层循环写的是innerItem of item， item是第一层循环中的(item, key) of cities。

双层循环的时候，如果父级的key值和子级循环的key一样了，也没有关系，只要父级的key值不重复就行了

字母索引组件的ABCD...的索引，同样可以用上面的cities数据，也就是第一层循环就能将索引都渲染出来。

渲染字母索引