歌曲搜索
步骤:1.按下回车 2.查询数据 3.渲染数据(前端显示数据)
问题:访问接口,如何返回对应数据,如何对数据中对应内容设置为前端界面访问类型
歌曲播放功能
切换歌曲的本质是更换不同歌曲的src
步骤:1.点击播放 (v-on 自定义参数)2.歌曲地址获取 (接口)3.歌曲地址设置(v-bind)
歌曲播放地址的的实际展示
vue方法中 playMusic 中 console.log(response.data.data[0].url); 打印歌曲播放地址
点击播放音乐按键,实现歌曲播放并可操作进度条,暂停,音量等功能
播放界面的封面更换
1.点击播放 2.歌曲封面获取 3.封面设置
评论功能展示
1.点击播放 2.评论获取 3.评论渲染
评论是列表,使用数组方式展示,如展示列表使用v-for:“item in hotComments” 使用item
播放 暂停 的动画效果
播放和暂停有各自的事件
1. 音乐播放(v-on play)2.监听音乐暂停(v-on pause)3.操纵类名(v-bind 对象)
mv播放
1.mv图标的显示 (v-if)2.mv地址获取 (接口 mvid)3.遮罩层(点击黑色的区域返回播放音乐界面)(点击效果 v-show v-on) 4.mv地址设置(属性设置 v-bind)
mv 图标显示问题 判断mvid显示是否为0
点击图标播放mv