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

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

  1. 在data中保存数据
  2. 在methods中保存对数据的操作,在html进行调用即可
  3. 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)
    })

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值