vue网易云音乐api实现视频播放,vue音乐播放组件

项目包地址


利用axios和网易云提供的API进行连接交互。依然要注意axios的回调函数中的this会发生改变，因此需要额外的变量对this进行保存。
因为文件稍大，因此最好重新新建一个js文件，然后在html进行引入即可

在data中保存数据在methods中保存对数据的操作，在html进行调用即可axios调用网易云中的数据格式为 //then后面为两个函数参数，第一个为成功时，第二个为失败时axios.get("https://autumnfish.cn/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实现动画的旋转等效果