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;
		},
		// 播放mv
		mvPlay: 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;
		}
		

	}
})

寫在最后的話

還有部分功能暫時還未實作，比如：搜索歌曲的歷史串列、歌詞頁、上一首、下一首等功能，后期將會持續更新，上述代碼中若存在問題，歡迎交流，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/280370.html

標籤：其他

上一篇：JavaScript型別檢測

下一篇：JavaScript學習手冊十六：瀏覽器物件模型