Vue介绍以及练手案例——音乐播放器（搜索音乐、听歌、看评论、看mv等）（持续更新）

Vue概述

它是一种 javascript框架
可以简化DOM操作
进行响应式数据驱动

el: 挂载点

vue实例的作用范围：vue会管理 el 选项所命中的元素及其内部的后代元素。
可以使用其他选择器，但推荐是 id 选择器
可以使用其他双标签，但不能使用 HTML 和 BODY ，一般推荐使用 div 标签
作用：设置 vue 实例挂载（管理）的元素

data: 数据对象

vue 中用到的数据定义在 data 中
data 中可以写复杂类型的数据，如对象、数组等
渲染复杂数据类型的数据时，遵守 js 的语法即可，数组用下标索引，对象用属性

本地应用

v-test：设置标签的文本值；默认写法会替换全部内容，无论内容是什么，只会解析为文本，如果进行部分替换则使用两个大括号 {{ }}（差值表达式）例如：<h2>提示：{{message + "!"}}</h2>
v-html：设置标签的 innerHtml；内容中有 html 结构会被自动解析为标签
v-on：为元素绑定事件v-on:click="方法名"；事件名不需要写on；绑定事件的方法是在script标签内写上方法对象methods:{方法名:function(){ // 详细逻辑 }}

简写形式：@click="方法名"

v-on还可以传递自定义参数，事件修饰符，传递参数：function（p1,p2）

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参

事件后面跟上 .修饰符可以对事件进行限制

.enter 可以限制触发的按键为回车
使用 this.数据名获取 DOM 元素
v-show：根据表达式的真假，切换元素的显示和隐藏，指令后面的内容最终都会被解析为布尔值，为了方便操纵，一般将这个指令定义成数据。支持表达式的书写方式。频繁切换元素用这个

本质：修改元素的 display属性，实现显示隐藏
v-if：根据表达式的真假，切换元素的显示和隐藏，不频繁的切换用这个。

本质：操纵 dom 元素的移除与添加
v-bind：设置元素的属性，v-bind:属性名=表达式 属性名可以省略，需要动态的增加/删除 class 属性建议使用对象的方式
v-for：根据数据生成列表结构；格式如：v-for="item in 数据(通常为数组名)" //这只会生成li标签但是里面没有内容，因此要添加内容使用{{item}}，此外数组要使用数组索引号的获取方式(item, index)，对象要使用对象的属性获取方式{{item.属性名}}；

数组经常和 v-for 结合使用

item 和 index 可以结合其他指令一起使用

数组长度的更新会同步到页面上，是响应式的
v-model：便捷的获取和设置表单元素的值（双向数据绑定）；绑定的数据会和表单元素的值相关联

网络应用

axios：网络请求库，它与Vue结合网络数据开发应用

axios

axios.get(地址即文档提供的接口地址).then( function(response) {}, function(err) {})

axios.get(地址?key=value&key2=value2).then( function(response) {}, function(err) {})

axios.post(地址，参数对象).then(function(response) {}, function(err) {})

axios.post(地址，{key: value,key2:value2}).then(function(response) {}, function(err) {})

注意：

axios必须先导入才可以使用
使用 get 或 post 方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容或错误信息
在和 vue 搭配使用的时候，axios回调函数中的this已经无法改变，无法访问到 data中的数据，因此要把 this 保存起来，回调函数中直接使用保存的 this 即可

应用案例：

服务器中的数据比较复杂的时候，要注意数据的层级结构
通过对象的方式设置类名，类名生效与否取决与后面值的真假
音频中带有 play 和 pause 事件
页面结构复杂时，通过审查元素的方式可以快速定位相关元素

音乐播放器

实现界面

HTML代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>音乐播放器</title><link type="text/css" href="css/music.css" rel="stylesheet" /></head><body><div class="wrap"><div class="play_wrap" id="player"><div class="search_bar"><div class="title">悦听</div>                  <div class="search"><input v-model="music" @keyup.enter="search(music)" type="text" class="content" /><img class="loupe" src="img/mirror.png"  @click="search(music)"/></div></div><div class="center_con"><div class="music_list"><ul class="music"><li class="music_li" v-for="item in musicList"><a href="javascript:;" @click="playMusic(item.id)"><img class="music_btn" src="img/play.png" /></a><span class="music_name"> {{ item.name }} </span><span class="mv_btn" @click="mvPlay(item.mvid)"><img class="mvtable" v-if="item.mvid!=0" src="img/mv.png" /></span></li></ul></div><div><img class="left_line" src="img/line.png" /></div><div class="pic" :class="{playing: isPlaying}" ><div class="top"><img class="player" src="img/player_bar.png" /></div><div class="center"><img class="cover" :src="picUrl" /><img class="disc" src="img/disc.png" /></div></div><div><img class="right_line" src="img/line.png" /></div><div class="comment_list_outer"><b class="comm">热门留言</b><br /><div class="comment_list"><ul class="comment"><li class="comment_li" v-for="item in hotComments"><img class="user_pic" :src="item.user.avatarUrl"/><div class="comm_right"><b class="user_nickname">{{ item.user.nickname }}</b><br /><span class="user_comm">{{ item.content }}</span></div></li></ul></div></div></div><div class="audio_con"><audio :src="musicURL" @play="play" @pause="pause" class="audio" autoplay controls loop></audio></div><div class="video_con"  v-show="isShow"><video ref="video" v-if="{hide: pause}" v-bind:src="mvUrl" v-show="isShow" autoplay controls loop></video><div class="mask" @click="hide"><div class="map"><div class="city"><div class="dotted"></div><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div>点外面都可以哦！</div></div></div></div></div></div><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="js/music.js"></script></body>
</html>

CSS代码

* {margin: 0;padding: 0;list-style: none;
}.wrap {width: 100vw;height: 100vh;overflow: hidden;background: url(../img/bg.jpg) no-repeat;background-size: 100% 100%;
}.play_wrap {width: 800px;height: 520px;margin: 77px auto;
}.search_bar {position: relative;z-index: 4;border-radius: 5px 5px 0 0;height: 60px;display: flex;background-color: dodgerblue;
}.title {flex: 1;padding-top: 10px;padding-left: 15px;color: white;line-height: 40px;font-size: 0;background: url(../img/player_title.png) no-repeat;background-position: 20px;
}.search {position: relative;flex: 1;line-height: 60px;padding-left: 240px;
}.loupe {position: absolute;top: 16px;left: 456px;width: 30px;height: 29px;cursor: pointer;
}.content {overflow: hidden;position: absolute;top: 16px;left: 241px;border: none;outline: none;width: 250px;height: 30px;padding-left: 10px;border-radius: 15px;background-color: #fcfcfc;
}.center_con {height: 445px;display: flex;background-color: rgb(255, 255, 255, .5);
}.music_list {flex: 6;overflow-y: auto;overflow-x: hidden;
}.music_list::-webkit-scrollbar,
.comment_list::-webkit-scrollbar {display: none;
}.music {padding: 5px;
}.music_li:nth-of-type(odd) {display: flex;padding: 3px;line-height: 37px;font-size: 12px;
}.music_li:nth-of-type(even) {display: flex;padding: 3px;line-height: 37px;font-size: 12px;background-color: rgba(240, 240, 240, 0.3);
}.comment_li {display: flex;padding: 10px;line-height: 20px;font-size: 15px;
}.music_btn {width: 17px;height: 17px;padding-top: 10px;flex: 2;
}.music_name {flex: 5;margin-left: 12px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}.mv_btn {flex: 2;cursor: pointer;
}.mvtable {padding-top: 10px;margin-left: 15px;width: 18px;height: 18px;
}.left_line,
.right_line {width: 1px;height: 440px;
}.pic {flex: 12;
}.player {position: absolute;top: 125px;left: 745px;z-index: 3;transform: rotate(-30deg);transform-origin: 12px 12px;transition: 1s;
}.playing .player {transform: rotate(0);
}.disc {position: absolute;width: 265px;height: 265px;top: 200px;left: 629px;z-index: 2;
}.cover {position: absolute;width: 160px;height: 160px;top: 250px;left: 682px;z-index: 1;}.comment_list_outer {flex: 6;padding: 8px;
}.comment_list {height: 415px;overflow-y: auto;overflow-x: hidden;
}.user_pic {width: 40px;height: 40px;border-radius: 50%;
}.comm_right {margin: 7px;
}.user_comm {font-size: 12px;color: #666;
}.audio_con {height: 35px;}.audio {outline: none;width: 800px;height: 45px;border-radius: 0 0 5px 5px;background-color: rgb(241, 243, 244);
}.mask {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 980;background-color: rgb(0, 0, 0, .4);
}video {position: fixed;left: 368px;top: 96px;width: 800px;height: 531px;z-index: 990;/* border: 0; */outline: none;
}@keyframes rotation {from {transform: rotateZ(0deg);}to {transform: rotateZ(360deg);}
}.cover,
.disc {-webkit-transform: rotate(360deg);animation-name: rotation;animation-iteration-count: infinite;animation-play-state: paused;animation-timing-function: linear;animation-duration: 4s;
}.pic.playing .disc,
.pic.playing .cover {animation-play-state: running;
}.map {position: relative;
}.city {position: absolute;top: 227px;right: 193px;color: #FFFFFF;
}.city div[class^="pulse"] {/* 保证小波纹在父盒子里面水平和垂直居中 */position: absolute;top: 11%;left: 3%;transform: translate(-50%, -50%);width: 8px;height: 8px;box-shadow: 0 0 12px #009DFB;border-radius: 50%;animation: pulse 1.6s linear infinite;
}.city div.pulse2 {animation-delay: 0.8s;
}.city div.pulse3 {animation-delay: 1.6s;
}@keyframes pulse {10% {width: 10px;height: 10px;opacity: 1;}40% {width: 30px;height: 30px;opacity: 0.7;}70% {width: 50px;height: 50px;opacity: 0.4;}100% {width: 70px;height: 70px;opacity: 0;}
}.dotted {width: 8px;height: 8px;border-radius: 4px;background-color: #009dfb;
}

js代码

// 歌曲搜索
// 1.按下回车（v-on .enter）
// 2.查询数据（axios 接口 v-model）
// 3.渲染数据（v-for 数组 that）
// 请求地址：https://autumnfish.cn/search
// 请求参数：keywords// 歌曲播放
// 1.点击播放（v-on）
// 2.歌曲地址获取（接口 歌曲id）
// 3.歌曲地址设置（v-bind）
// 请求地址：https://autumnfish.cn/song/url
// 请求参数：id（歌曲id）// 歌曲封面
// 1.点击播放（增加逻辑）
// 2.歌曲封面获取（接口 歌曲id）
// 3.歌曲封面设置（v-bind）
// 请求地址：https:autumnfish.cn/song/detail
// 请求参数：ids// 歌曲评论
// 1.点击播放（增加逻辑）
// 2.歌曲评论获取（接口 歌曲id）
// 3.歌曲评论渲染（v-for）
// 请求地址：https://autumnfish.cn/comment/hot?type=0
// 请求参数：id// 播放动画
// 1.监听音乐播放（v-on play）
// 2.监听音乐暂停（v-on pause）
// 3.操纵类名（v-bind 对象 因此需要在data中添加一个boolean值）// mv播放
// 1.图标显示（v-if）
// 2.地址获取（接口 mvid）
// 3.遮罩层（v-show v-on）
// 4.地址设置（v-bind）
// 请求地址：https://autumnfish.cn/mv/url
// 请求参数：id（mvid,为0表示没有mv）var app = new Vue({el: "#player",data: {music: "",musicList: [],musicURL: "",picUrl: "",hotComments: [],// 动画的显示与隐藏isPlaying: false,mvId: "",mvUrl: "",// 遮罩层的显示与隐藏isShow: false     },methods: {// 歌曲搜索search:function(music) {var that = this;axios.get("https://autumnfish.cn/search?keywords=" + music).then(function(response) {console.log(response);that.musicList = response.data.result.songs;}, function(err) {console.log(err);})},// 歌曲播放playMusic: function(musicId) {var that = this;axios.get("https://autumnfish.cn/song/url?id="+musicId).then(function(response) {that.musicURL = response.data.data[0].url;}, function(err) {console.log(err);});// 歌曲封面axios.get("https:autumnfish.cn/song/detail?ids="+musicId).then(function(response){console.log(1);// console.log(response);that.picUrl = response.data.songs[0].al.picUrl;},function(err){console.log(err);});// 歌曲评论axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(function(response) {console.log(2);// console.log(response);// console.log(response.data.hotComments);that.hotComments = response.data.hotComments;}, function(err) {console.log(err);})},// 播放动画play: function() {// console.log("play");this.isPlaying = true;},pause: function() {// console.log("pause");this.isPlaying = false;},// 播放mvmvPlay: function(mvId) {var that = this;axios.get("https://autumnfish.cn/mv/url?id=" + mvId).then(function(response) {console.log(3);that.isShow = true;that.mvUrl = response.data.data.url;}, function(err) {console.log(err);})},hide: function() {this.isShow = false;}}
})

写在最后的话

还有部分功能暂时还未实现，比如：搜索歌曲的历史列表、歌词页、上一首、下一首等功能，后期将会持续更新，上述代码中若存在问题，欢迎交流。

Vue介绍以及练手案例——音乐播放器（搜索音乐、听歌、看评论、看mv等）（持续更新）相关推荐

【毕业设计】28-基于单片机的音乐播放器简易音乐播放器设计（原理图+源代码+仿真工程+答辩PPT+答辩论文）
typora-root-url: ./ [毕业设计]28-基于单片机的音乐播放器简易音乐播放器设计(原理图+源代码+仿真工程+答辩PPT+答辩论文) 文章目录 typora-root-url: ./ ...
我用 Python 写了一款炫酷音乐播放器，想听啥随便搜！
作者:Dragon少年版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/hhladminh ...
mac音乐播放器QQ音乐好用吗？vip绿钻的QQ音乐有哪些版本优势？
mac音乐播放器QQ音乐好用吗?当然!QQ音乐是Mac平台用户体验极佳的音乐播放器,最新最热的排行榜.歌单.电台.MV天天推荐,智能音乐搜索.猜你喜欢帮你轻松发现音乐.更何况是不需要绿钻和付费包,VI ...
使用android studio时酷狗音乐,17 Android Studio开发实战：音乐播放器——浪花音乐...
手机上的多媒体内容讲究声情并茂.悦目且悦耳,这样才能让用户的感官得到最大享受.影视播放器由于存在视频自身的画面,反而限制了开发者的施展空间:而音乐播放器允许定制播放画面,开发者有足够空间施展拳脚.本节 ...
php文件添加音乐播放器,window_win10系统自带Groove音乐播放器在哪？自带Groove音乐播放器添加音乐等功能的使用教程，　　播放器在哪？1 - phpStudy...
win10系统自带Groove音乐播放器在哪?自带Groove音乐播放器添加音乐等功能的使用教程播放器在哪? 1.点击桌面的左下端"开始菜单"符号,然后在右上角,找到" ...
iOS开发之网络音乐播放器(SC音乐)（二）
iOS开发之网络音乐播放器(SC音乐)(二) 前言 iOS开发之网络音乐播放器(SC音乐)(一)已经介绍完播放控制.音乐数据获取解析.歌词显示等.本文在上文的基础上介绍锁屏播放设置,后台播放设置,手势 ...
php 在线调用音乐播放器,宅音乐播放器,HTML5网页播放器，带后台管理及API调用，使用thinkphp编写...
宅音乐播放器宅音乐播放器,HTML5网页播放器,集成后台管理及API调用,目前正在开发中,敬请关注技术栈后端:thinkphp 5.1 前端:layui 数据库:mysql 演示整合依赖安装包 ...
Android获取第三方音乐播放器的音乐信息
最近在做Android手机获取第三方音乐播放器的音乐信息.一开始头疼的很,采集第三方的信息太难了,后面看了一遍博文是关于怎么监听系统的音乐播放信息,发现在播放下一首音乐的时候会发送广播,广播会包含下一 ...
Android音乐播放器——甩动切歌
Android音乐播放器--甩动切歌前言: 使用MediaPlayer实现Android的音乐播放器,能够播放.暂停.停止歌曲,控制播放上一首,下一首歌曲:同时可以使用感应器来感应甩动动作,然后完成 ...