1.使用npm在当前项目下安装axios：npm install axios --save ，安装成功后有两种使用方式：
· 因为axios并非vue的组件，若想全局引用就得在main.js里把axios挂载到Vue的原型上：
import axios from 'axios'； //引入axios
Vue.prototype.$ajax=axios； //挂载到vue原型
·每个vue组件有独立的作用域，在组件内要通过this访问：
注意这里的json数据，是本地模拟的静态数据，要写在static里面，否则无法访问
·组件局部使用axios：
import axios from 'axios'； //先引入axios
axios.get("http://localhost:8080/static/data.json").then(dd=>{ ........ }) //直接使用axios，不用加this
2.创建List组件，获取父组件的json数据循环数据并放在相应位置：
index父组件传输axios获得的数据：<my-list :lists="tlist"></my-lis>
· 最右边的索引，视频里是写了一个方法过滤push到一个数组里，然后循环数组输出到索引列表：
我觉得直接循环json数据获取也是一样啊，不明白为何多此一举
3.点击相应的字母索引，使相应的列表其出现在最顶端：
4.点击某条获取其对应的号码：
<li v-for="user in item.users" @touchend="showTel(user.tel)">{{user.tel}}</li> // touchend会在touchmove后触发
如果仅仅用touchstart事件判断，不仅点击时传递号码，滑动也会触发，解决办法 是加个判断。 在data里定义一个bMove，默认值为false，当整个 ul 列表滑动的时候bMove 为true，就不触发点击事件.： <ul class="list_user" ref="listUser" @touchmove="bMove=true"> ...... </ul>
完成效果如下：
右侧字母列表总是获取不到高度，即使把方法写在mounted里，等找到解决办法再来填坑。
本节到此结束，下节会讲使用vue和js动态创建和删除弹窗。
