失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > Vue学习笔记(利用网易云API实现音乐播放器 实例)

Vue学习笔记(利用网易云API实现音乐播放器 实例)

时间:2022-09-02 12:47:45

相关推荐

Vue学习笔记(利用网易云API实现音乐播放器 实例)

项目包地址

利用axios和网易云提供的API进行连接交互。依然要注意axios的回调函数中的this会发生改变,因此需要额外的变量对this进行保存。

因为文件稍大,因此最好重新新建一个js文件,然后在html进行引入即可

在data中保存数据在methods中保存对数据的操作,在html进行调用即可axios调用网易云中的数据格式为

//then后面为两个函数参数,第一个为成功时,第二个为失败时axios.get("/search?keywords="+this.query).then( function(response){that.musiclist=response.data.result.songs;},function(err){console.log(err)})

也可以在方法中的参数中设置已经获取的数据,对数据进行调用,以实现代码的复用,同时可以利用函数中的参数以实现数据列表的响应在项目过程中,错误地将播放mv的外层标签div写成了video标签,造成mv遮罩层显示失败,进而无法实现mv播放功能(一定要细心)可以利用boolean值和v-on结合实现对音乐状态的改变在Css中利用@keyframes实现动画的旋转等效果

如果觉得《Vue学习笔记(利用网易云API实现音乐播放器 实例)》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。