零基础vue.js学习笔记进阶篇

笔记整理来源 B站up主黑马程序员
B站黑马程序员 快速入门vue前端

适合初学者入门vue.js&＃xff0c;
该文是进阶篇
基础篇包括课程中的Vue基础和本地应用环节
该文是进阶篇&＃xff0c;包括网络应用和综合应用
基础篇链接

Vue.js

网络应用

介绍

Vue结合网络数据开发应用

axios :网络请求库

axios&＃43;vue 结合vue一起

通过天气预报巩固

axios基本使用

axios导入

get请求

axios.get(地址?key&＃61;value&key2&＃61;value2).then(function(response){},function(err){})
response函数会在请求成功后调用 err会在请求失败后调用


随机笑话接口

实战演示

功能

正常执行&＃xff0c;在控制台输出五条笑话

如果用注释的语句会执行err语句&＃xff0c;在控制台输出错误代码。

post请求

axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})
response函数会在请求成功后调用 err会在请求失败后调用


用户注册接口

实战演示

功能

正常执行&＃xff0c;在控制台输出***用户注册成功

如果用注释的语句会执行err语句&＃xff0c;在控制台输出错误代码。

总结

先导入再使用

使用get或post方法可发送对应的请求

then方法中的回调函数会在请求成功或失败时候触发

通过回调函数的形参可以获取响应内容&＃xff0c;或错误信息

官网&＃xff1a;https://github.com/axios/axios

axios&＃43;vue

axios如何结合vue开发网络应用

一条随机笑话接口

总结

*axios回调函数中的this已经改变&＃xff0c;无法访问到data中的数据

*把this保存起来&＃xff0c;用that。回调函数中直接使用保存的this即可

天知道-介绍

天知道–回车查询

1.按下回车(v-on.enter)

2.查询数据(axios 接口 v-model)

3.渲染数据(v-for 数组 that)

天气接口

主体html框架代码

主页面部分重要代码

• {{item.type}}{{item.low}}{{item.high}} {{item.data}

创建js文件main.js 并在主页面中导入

天知道–点击查询

1.点击城市(v-on 自定义参数)

2.查询数据(this方法)

3.渲染数据

新增方法

changeCity:function(city){this.city&＃61;city;this.searchWeather();
}


与超链接进行绑定

北京


总结

*自定义参数可以让代码的复用性更高

*methods定义的方法内部&＃xff0c;&＃xff0c;可以通过this调用

综合应用-悦听-介绍

天知道-音乐查询

所需步骤

1.按下回车(v-on .ent)

2.查询数据(axios 接口 v-model)

3.渲染数据(v-for 数组 thar)

歌曲搜索接口

页面整体布局

创建js文件 在主页面中引入

主页面的

• 
  
  {{item.name}}
  

总结

*服务器返回的数据比较复杂时&＃xff0c;获取的时候需要注意层级结构

*通过审查元素快速定位到需要操纵的元素

音乐播放

1.点击播放(v-on 自定义参数)

2.歌曲地址获取(接口 歌曲id)

3.歌曲地址设置(v-bind)

歌曲url获取地址

新增属性

musicUrl:""


新增方法

playMusic:function(musicid){var that&＃61;this;axios.get("http://autumnfish.cn/song/url?id&＃61;"&＃43;this.query).then(function(response){that.musicUrl&＃61;response.data.result.songs;},function(err){ })
}


主页面中

总结

*歌曲id依赖歌曲搜索的结果&＃xff0c;对于不用的数据也需要关注

歌曲封面

1.点击播放(增加逻辑)

2.歌曲封面获取(接口 歌曲id)

3.歌曲封面设置(v-bind)

歌曲详情获取

上半区playmusic中

playMusic:function(musicid){var that&＃61;this;axios.get("http://autumnfish.cn/song/url?id&＃61;"&＃43;this.query).then(function(response){that.musicUrl&＃61;response.data.result.songs;},function(err){ })
}


新增加属性

musicCover:""


playmusic中新增加逻辑

axios.get("http://autumnfish.cn/song/detail?ids&＃61;"&＃43;musicId)
.then(function(response){
that.musicCover&＃61;response.data.song[0].al.picUrl;
},function(err){ })


主页面中

总结

*在vue中通过v-bind操纵属性

*本地无法获取的数据&＃xff0c;基本都会有对应的接口

歌曲评论

1.点击播放(增加逻辑)

2.歌曲评论获取(接口 歌曲id)

3.歌曲评论渲染(v-for)

热门评论获取

新加属性

hotComments:[]


playMusic中新增加逻辑

axios.get("http://autumnfish.cn/comment/hot?type&＃61;0&id&＃61;"&＃43;musicId)
.then(function(response){
that.hotComments&＃61;response.data.hotComments;
},
funcstion(err){ })


主页面中

总结

*在vue中通过v-for生成列表

播放动画

1.监听音乐播放(v-on play)

2.监听音乐暂停(v-on pause)

3.操纵类名(v-bind 对象)

新增属性

isPlaying:false


新增方法

paly:function(){this.isPlaying&＃61;true;
}
pause:function(){this.isPlaying&＃61;false;
}


主页面中

总结

*audio标签的play事件会在音频播放的时候触发

*audio标签的pause事件会在音频暂停的时候触发

*通过对象的方式设置类名&＃xff0c;类名生效与否取决于后面值的真假

播放MV

1.mv图标(v-id)

2.mv地址获取(接口 mvid)

3.遮罩层(v-show v-on)

4.mv地址设置(v-bind)

mv地址获取

mv图标是否显示

新增属性

//遮罩层的显示状态
isShow:false
//mv地址
mvUrl:""


新增方法

palyMV:function(mvid){
var that&＃61;this;axios.get("http://autumnfish.cn/mv/url?id&＃61;"&＃43;mvid).then(function(response){that.isShow&＃61;true;that.mvUrl&＃61;response.data.data.url},function(err){ })
}
hide:function(){this.isShow&＃61;false;
}


主页面中

*不同的接口需要的数据是不同的&＃xff0c;文档的阅读需要仔细

|


mv图标是否显示

新增属性

//遮罩层的显示状态
isShow:false
//mv地址
mvUrl:""


新增方法

palyMV:function(mvid){
var that&＃61;this;axios.get("http://autumnfish.cn/mv/url?id&＃61;"&＃43;mvid).then(function(response){that.isShow&＃61;true;that.mvUrl&＃61;response.data.data.url},function(err){ })
}
hide:function(){this.isShow&＃61;false;
}


主页面中

*不同的接口需要的数据是不同的&＃xff0c;文档的阅读需要仔细

*页面结构复杂后&＃xff0c;通过审查元素的方式去快速定位相关元素