使用vue-cli创建手机通讯录demo(2)

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动态创建和删除弹窗。