Vue笔记（4）

网络应用

Vue结合网络数据开发应用

• axios网络请求库
• axios+vue

axios

导包

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

网络请求库：

axios.get(地址).then(function(response){},function(err){})

地址
第一个回调函数会在响应完成（请求完成）触发。
第二个回调函数会在请求失败的时候触发。
他们的形参可以用来获取信息，一个是服务器响应的内容，一个是错误的信息，如果需要传递参数，
在URL后加上查询字符串就可以。
key是文档提供的，value是我们要传递的值。

axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err))

其他同上
数据是以对象的形式写在post方法中的第二个参数内部

• axios必须先导入才可以使用
• 使用get或post方法即可发送对应的请求
• then方法中的回调函数会在请求成功或失败时触发
• 通过回调函数的形参可以获取响应内容,或错误信息

axios+Vue

• axios回调函数中的this已经改变,无法访问到data中数据
• 把this保存起来,回调函数中直接使用保存的this即可
• 和本地应用的最大区别就是改变了数据来源

网络应用-天知道

回车查询：

1. 按下回车(v-on.enter)
2. 查询数据(axios接口 v-model)
3. 渲染数据(v-for 数组 that)
   
   
   

• 应用的逻辑代码建议和页面分离，使用单独的js文件编写
• axios回调函数中this指向改变了，需要额外的保存一份
• 服务器返回的数据比较复杂时，获取的时候需要注意层级结构
  
  点击查询：

• 自定义参数可以让代码的复用性更高
• methods中定义的方法内部，可以通过this关键字点出其他的方法

综合应用

歌曲搜索

• 服务器返回的数据比较复杂时，获取的时候需要注意层级结构
• 通过审查元素快速定位到需要操纵的元素

音乐播放

要用到搜索歌曲里的id字段。

• 歌曲id依赖歌曲搜索的结果，对于不用的数据也需要关注

歌曲封面

1. 点击播放(增加逻辑)
2. 歌曲封面获取(接口歌曲id)
3. 歌曲封面设置(v-bind)
   

• 在vue中通过v-bind操纵属性
• 本地无法获取的数据，基本都会有对应的接口

歌曲评论

1. 点击播放
2. 歌曲评论获取
3. 歌曲评论渲染
   
   
   

播放动画

• audio标签的play事件会在音频播放的时候触发
• audio标签的pause事件会在音频暂停的时候触发
• 通过对象的方式设置类名，类名生效与否取决于后面值的真假