本片文章用来记录在实现音乐播放器时所复习到的知识点。
1.css部分
（1）精灵图的使用
精灵图(Sprite)，也称作雪碧图，如下所示。即把很多的小图片合并到一张较大的图片里，在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。
使用：将精灵图设置为背景图片，设置好显示区域大小，然后通过移动背景图(background-position)显示精灵图中需要的部分。
.item i {
display: inline-block;
width: 23px;
height: 17px;
background: url("../images/table.png") -60px -48px;
vertical-align: middle;
}
（2）实现可滚动列表并隐藏滚动条
歌曲列表过长，需要实现滚动浏览列表，但是想要隐藏不美观的滚动条。
<!--html代码-->
<div class="left">
<ul class="list">
<li class="item" v-for="item in musicList">
<a href="javaxript:;" @click="songPlay(item.id)"></a>
<span>{{item.name}}</span>
<i v-if="item.mvid!=0" @click="playMv(item.mvid)"></i>
</li>
</ul>
</div>
/* css代码 */
::-webkit-scrollbar {
display: none
}
.left {
flex: 1;
overflow-y: scroll;
}
（3）对齐小图标以及文字
一般小图标+文字（横向）的格局，可以使用行内块元素。然后给图片的css加上
vertical-align:middle
可以实现它与文字的对齐。
（4）设置元素的堆叠顺序 z-index
z-index
需要注意：z-index 仅能在定位元素上奏效(如position:absolute)。
（5）设置全屏100%的背景图片
.bcg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../images/bg.jpg") no-repeat;
background-size: 100% 100%;
}
（6）动画效果
需求：播放时，cd和专辑封面同步转动，播放杆旋转至下方。暂停时，cd和专辑封面停止转动，播放干旋转回上方。
cd和专辑封面的转动：
/* 定义旋转的动画(cd和专辑封面) */
@keyframes Rotate {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
/* 旋转的类 */
.autoRotate {
animation-name: Rotate; /*规定需要绑定到选择器的keyframe 名称。*/
animation-iteration-count: infinite; /* 规定动画应该播放的次数,infinite为无限。*/
animation-play-state: paused; /*规定动画正在运行还是暂停,paused为暂停*/
animation-timing-function: linear; /*规定动画的速度曲线。*/
animation-duration: 5s; /*规定完成动画所花费的时间，以秒或毫秒计。*/
}
/* 是否正在播放 */
.playing .disc,
.playing .cover {
animation-play-state: running; /*规定动画正在运行还是暂停,running为运行*/
}
播放杆位置通过rotate实现旋转：
/* 播放杆暂停时位置 */
.bar {
position: absolute;
left: 200px;
top: -20px;
transform: rotate(-25deg);
transform-origin: 12px 12px;
z-index: 9;
}
/* 播放杆播放 */
.playing .bar {
transform: rotate(0);
}
2.使用axios获取数据
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。它能拦截请求和响应并自动转换json数据。该音乐播放器仅使用到通过axios接口发送get请求获取数据。
// 示例：get请求的发送
axios.get('http://localhost:3000/adata?id=123').then(function(ret) {
// data是ret对象中的一个属性，用于获取后台的实际数据
console.log(ret.data);
});
3.vue的使用
（1）在创建的vue实例中包含以下几个属性：
el
为实例挂载的元素节点，
data
为数据，
methods
为使用的方法。（下附部分代码）
var vm = new Vue({
el: '#player',
data: {
query: '',
musicList: []
},
methods: {
searchMusic: function() {
var that = this;
axios.get("https://autumnfish.cn/search?keywords=" + this.query)
.then(function(response) {
// console.log(response);
that.musicList = response.data.result.songs;
}, function(err) {})
}
});
（2）循环渲染列表数据
v-for
指令可以遍历列表musicList，对页面进行渲染。
@click
指令则是绑定点击事件（即绑定vue实例中methods里的方法），它是
v-on:click
的缩写。
v-if
指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回真值的时候被渲染。
<ul class="list">
<li class="item" v-for="item in musicList">
<a href="javaxript:;" @click="songPlay(item.id)"></a>
<span>{{item.name}}</span>
<i v-if="item.mvid!=0" @click="playMv(item.mvid)"></i>
</li>
</ul>
（3）
v-model
指令实现数据双向绑定。在使用
v-on
指令时，可以添加按键修饰符，如
@keyup.enter
指令监听键盘enter键抬起事件。
补充：
v-model
指令实际上就是用
v-on
事件绑定和
v-bind
属性绑定实现数据的双向绑定。
（4）
v-bind
属性绑定
v-bind
可以简写为
:
。
其中，
:class="{playing:isPlaying}"
实现了通过判断isPlaying变量的真假值，决定是否绑定playing类。
:src="imgUrl"
将图片链接与数据imgUrl进行绑定。
<div class="middle" :class="{playing:isPlaying}">
<img :src="imgUrl" alt="" class="cover autoRotate">
<img src="./images/disc.png" alt="" class="disc autoRotate">
<img src="./images/player_bar.png" alt="" class="bar">
</div>
（5）
v-show
指令控制css的display属性。当v-show="false"时，相当于display:none。
<div class="video_box" v-show="isShow">
<div class="mask" @click="close"></div>
<video :src="mvUrl" controls="controls" autoplay="autoplay"></video>
</div>
补充：
v-if
和
v-show
都能控制元素的显示与隐藏。
v-show本质就是通过设置css中的display设置为none控制隐藏，而v-if是动态的向DOM树内添加或者删除DOM元素。因此，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。如果需要频繁切换使用v-show 较好，如果不怎么需要变化则使用 v-if 较好。