本片文章用來記錄在實作音樂播放器時所複習到的知識點。
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 較好。