vue学习

最新推荐文章于 2022-11-14 16:10:13 发布

suan奶牛

最新推荐文章于 2022-11-14 16:10:13 发布

阅读量248

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_40381509/article/details/119361214

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue 基础

el：挂载点

1、el的作用：设置Vue实例挂载/管理的元素
2、Vue会管理el命中的元素以及内部的后代元素
3、可以使用其他选择器，建议使用id选择器
4、可以使用其他的双标签，不能使用和

data：数据对象

Vue中用到的对象定义在data中，data中可以写简单类型、数组、复杂对象等

methods：方法对象

本地应用

v-text 指令：

设置标签的内容，可以使用 {{ xx }}

<html>
	<head>
		<title>vue test</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{ message + "拼接字符串1"}}<br/>
			{{ message }}拼接字符串2
			<br/>
			<span>
				{{ student.wechat}} : {{ student.name }} : {{ student.age }}
			</span>
			<ul>
				<li>{{ address[0] }}</li>
				<li>{{ address[1] }}</li>
			</ul>
			
			<h2 v-text="message + '拼接字符串3'">
				123（无效、不显示123）
			</h2>
		</div>
		
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"hello,姚",
					student:{
						name:"yaoyu",
						age:18,
						wechat:"microddyy"
					},
					address:["shanghai","北京"]
				}	
			})
		</script>
	</body>
</html>

v-html 指令：

用于设置元素的innerHTML
解析纯文本用v-text，需要解析html时使用v-html

<html>
	<head>
		<title>vue test</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id='app'>
			<p v-html="content"></p>
			<p v-text="content"></p>
		</div>
		
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					// content:"something"
					content:"<a href='http://www.baidu.com'>点我</a>"
				}
			})
		</script>
	</body>
</html>

v-on 指令：

为元素绑定事件

注意：
1、事件名不加on
2、v-on 可以简写为：@
3、绑定的方法写在methods属性中
4、方法内通过this 关键字可以访问data中的数据

<html>
	<head>
		<title>vue test</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id='app'>
			<input type="button" value="单机事件绑定1" v-on:click="doSome"/>
			<input type="button" value="双击事件绑定2" v-on:dblclick="doSome"/>
			<!-- 简写 -->
			<input type="button" value="单机事件绑定3" @click="doSome"/>
			<!-- 不操作dom元素，通过事件修改页面元素的值 -->
			<h2 type="button" @click="change">{{ food }}</h2>
		</div>
		
		<script>
			var app = new Vue({
				el:'#app',
				methods:{
					doSome:function(){ // 函数名:function(){xxxx}
						alert(123);
					},
					change:function(){
						this.food += "potato";
					}
				},
				data:{
					 food:"西红柿"
				}
			})
		</script>
	</body>
</html>

小例子：计数器

<html>
	<head>
		<title>vue test</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="input_nunm">
				<button @click="down">
					-
				</button>
				<span>{{ num }}</span>
				<button @click="up">
					+
				</button>
			</div>
		</div>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					num:1
				},
				methods:{
					down:function(){
						if (this.num > 0){
							this.num--;
						} else{
							alert("不能减小了！");
						}
					},
					up:function(){
						if (this.num < 5){
							this.num++;
						} else{
							alert("不能增大了！");
							// return;
						}
						// console.log("up!!!");
					}
				}
			})
		</script>
	</body>
</html>

结果：

在这里插入图片描述

点击 + 计数加一，点击 - 计数减一。减到0弹窗提示不能再减了，加到5弹窗提示不能再加了。

v-show 指令：

根据表达式的真假，切换元素的显示和隐藏。本质是通过修改元素的 display 属性来实现显示或者隐藏

<html>
	<head>
		<title>vue test</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<img src="http://www.itheima.com/images/logo.png" alt="图片加载失败提示文字" title="鼠标悬停图片上提示文件" v-show="true"/>
			<img src="http://www.itheima.com/images/logo.png" alt="图片加载失败提示文字" title="鼠标悬停图片上提示文件" v-show="isShow"/>
			<img src="http://www.itheima.com/images/logo.png" alt="图片加载失败提示文字" title="鼠标悬停图片上提示文件" v-show="age>18"/>
		</div>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					isShow:false,
					age:19
				}
			})
		</script>
	</body>
</html>

v-if 指令：

根据表达式的真假，切换元素的显示与隐藏（操作的是dom元素，表达式为false就直接移除标签，表达式为true时在dom树中添加标签。v-show修饰的元素一直都在html中，只是修改了元素的display属性）

频繁变换的数据使用 v-show，否则使用 v-if（操作dom元素更消耗性能）

<img src="http://www.itheima.com/images/logo.png" alt="图片加载失败提示文字" title="鼠标悬停图片上提示文件" v-if="true"/>
<img src="http://www.itheima.com/images/logo.png" alt="图片加载失败提示文字" title="鼠标悬停图片上提示文件" v-if="isShow"/>
<img src="http://www.itheima.com/images/logo.png" alt="图片加载失败提示文字" title="鼠标悬停图片上提示文件" v-if="age>18"/>

v-bind 指令：

设置元素的属性，如：class、src、title等

注意：v-bind可以省略；设置class时建议使用对象的方式

<html>
	<head>
		<title>vue test</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		
		<style>
			.active{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<img v-bind:src="imgSrc" />
			<!-- 简写 -->
			<img :src="imgSrc" :title="imgSrc+'123'"/>
			
			<input type="button" value="change" @click="toggleActive"/>
			<img :src="imgSrc" :class="isActive?'active':''" />
			<img :src="imgSrc" :class="{active:isActive}" />
			
		</div>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					imgSrc:"http://www.itheima.com/images/logo.png",
					isActive:false
				},
				methods:{
					toggleActive:function(){
						this.isActive = !this.isActive;
					}
				}
			})
		</script>
	</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PVWpnedy-1628002748861)(C:\Users\yao\AppData\Roaming\Typora\typora-user-images\image-20210802155313769.png)]$

小例子：图片切换

分析：将图片保存到数组中 → 为每个图片设置一个索引 → 绑定src属性 → 写切换图片的逻辑 → 显示状态切换

<html>
	<head>
		<title>vue test</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<link rel="stylesheet" href="./css/index.css" />
	</head>
	<body>
		<div id="mask">
		  <div class="center">
		    <h2 class="title">
				<img src="./images/logo.png" alt=""> xxxx校区环境
			</h2>
			
			<img :src="imageAddress[index]"/ alt="">
			<!-- 左箭头 -->
			<a href="javascript:void(0)" class="left">
				<img src="./images/prev.png" alt="" @click="prev"/ v-show="index!=0">
			</a>
			<!-- 右箭头 -->
			<a href="javascript:void(0)" class="right">
				<img src="./images/next.png" alt="" @click="next" v-show="index<imageAddress.length-1"/>
			</a>
		    
		  </div>
		</div>
		
		<script>
			var app = new Vue({
				el:"#mask",
				data:{
					imageAddress:[
						"./images/00.jpg",
						"./images/01.jpg",
						"./images/02.jpg",
						"./images/03.jpg",
						"./images/04.jpg",
						"./images/05.jpg",
						"./images/06.jpg",
						"./images/07.jpg",
						"./images/08.jpg",
						"./images/09.jpg",
						"./images/10.jpg",
					],
					index:0
				},
				methods:{
					prev:function(){
						this.index--;
					},
					next:function(){
						this.index++;
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

v-for 指令：

遍历数组、对象等数据，动态【展示、删除、添加】页面元素。

<!DOCTYPE html>
<html>
	<head>
		<title>vue test</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
                <!--item代表每一项数据，index代表数据索引-->
				<li v-for="(item,index) in arr" v-bind:title="item">
					{{ index+1 }}:生成的列表：{{ item }}
				</li>
			</ul>
			<h2 v-for="it in objArr">{{ it }}</h2>
			<h2 v-for="it in objArr">{{ it.name }}</h2>

            <!--点击按钮触发响应事件-->
			<input type="button" value="添加" @click="add" />
			<input type="button" value="删除" @click="remove" />

		</div>
		</div>

		<script>
			var app = new Vue({
				el: "#app",
				data: {
					arr: ["bj", "sh", "gz", "sz"], // 数组数据
					objArr: [ // 对象数据
						{name: "zs"},
						{name: "ls"},
					]
				},
				methods:{
					add:function(){
						this.objArr.push({name:"ww"}); // push方法增加元素
						this.arr.push("qq"); // 
					},
					remove:function(){
						this.objArr.shift(); // shift方法默认删除最左边的元素
					}
				}
			})
		</script>
	</body>
</html>

v-on 指令补充：

1、传递自定义参数

2、事件修饰符

<!DOCTYPE html>
<html>
	<head>
		<title>vue test</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="click" @click="getNum(2)"/>
			<!-- 绑定按下enter键触发。事件后跟上【.修饰符】对事件进行限制 -->
			<input type="text" v-on:keyup.enter="doSome" />

		</div>
		</div>

		<script>
			var app = new Vue({
				el: "#app",
				methods:{
					getNum:function(num){ // 自定义形参
						console.log(num);
					},
					doSome:function(){
						alert("!!!");
					}
				}
			})
		</script>
	</body>
</html>

v-model 指令：

获取用户的输入。
获取和设置表单元素的值（也叫：双向数据绑定），绑定的数据 和 表单元素的值 相关联

<!DOCTYPE html>
<html>
	<head>
		<title>vue test</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="click" @click="changeM"/>
			<input type="text" v-model="message" v-on:keyup.enter="doSome" />
			<h2>{{ message }}</h2>
		</div>
		</div>

		<script>
			var app = new Vue({
				el: "#app",
				data:{
					message:"xxx"
				},
				methods:{
					doSome:function(){
						alert("!!!");
					},
					changeM:function(){
						this.message="yyy";
					}
				}
			})
		</script>
	</body>
</html>

小例子：记事本

功能：

1新增：
生成列表结构：v-for
获取用户输入：v-model
回车，新增数据：v-on.enter

2删除：
点击 × 删除指定记录

3统计：
自动更改数据条数

4清空：
清除所有数据

5隐藏：
没有数据时，隐藏底部：v-show / v-if

<!DOCTYPE html>
<html>
	<head>
		<title>notebook</title>
		<!-- <meta name="robots" content="noindex, nofollow" />
		<meta name="googlebot" content="noindex, nofollow" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
		<link rel="stylesheet" type="text/css" href="./css/index2.css" />
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<!-- 主体区域 -->
		<section id="todoapp">
		  <!-- 输入框 -->
		  <header class="header">
		    <h1>小黑记事本</h1>
		    <input autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo" v-model="inputValue" v-on:keyup.enter="generateNote"/>
		  </header>
		  <!-- 列表区域 -->
		  <section class="main">
		    <ul class="todo-list">
		      <li class="todo" v-for="(item,index) in arr">
		        <div class="view" >
		          <span class="index">{{ index+1 }}</span>
		          <label>{{ item }}</label>
		          <button class="destroy" @click="deleteEle(index)"></button>
		        </div>
		      </li>
		    </ul>
		  </section>
		  <!-- 统计和清空 -->
		  <footer class="footer" >
		    <span class="todo-count" v-show="arr.length!=0">
		      <strong>{{ arr.length }}</strong> items left
		    </span>
			
		    <button class="clear-completed" @click="clearEle" v-if="arr.length!=0">
		      Clear
		    </button>
		  </footer>
		</section>
		<!-- 底部 -->
		<footer class="info"></footer>

		<script>
			var app = new Vue({
				el:"#todoapp",
				data:{
					arr:["吃饭", "睡觉", "学习"],
					inputValue:"xxxxx"
				},
				methods:{
					generateNote:function(){
						this.arr.push(this.inputValue); // 往数组添加元素
					},
					deleteEle:function(index){
						this.arr.splice(index,1); // splice(index,len,[item])：替换/删除/添加数组内某一个或者几个值（该方法会改变原始数组）
					},
					clearEle:function(){
						this.arr=[];
					}
				},
			})

		</script>
	</body>
</html>

在这里插入图片描述

网络应用

Vue结合网络数据开发应用

axios 网络请求库

ajax | jquryAjax | fetch | axios

1、使用axios前需要到导包，如：
2、使用get或post方法即可发送对应的请求
3、then方法中的回调函数在请求成功或失败后触发
4、通过回调函数的形参可以获取响应内容或错误信息

文档：https://github.com/axios/axios

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<input type="button" value="get请求" class="get"/>
		<input type="button" value="post请求" class="post"/>
		<script>
			/*
			    接口1:随机笑话
			    请求地址:https://autumnfish.cn/api/joke/list
			    请求方法:get
			    请求参数:num(笑话条数,数字)
			    响应内容:随机笑话
			*/
			document.querySelector(".get").onclick=function(){
				axios.get("https://autumnfish.cn/api/joke/list?num=6")
				.then(function(response){
					console.log(response);
				}, function(err){
					console.log(err);
				})
			}
			/*
			     接口2:用户注册
			     请求地址:https://autumnfish.cn/api/user/reg
			     请求方法:post
			     请求参数:username(用户名,字符串)
			     响应内容:注册成功或失败
			 */
			document.querySelector(".post").onclick=function(){
				axios.post("https://autumnfish.cn/api/user/reg",{username:'zzz'})
				.then(function(response){
					console.log(response);
				})
				.catch(function(err){
					console.log(err);
				})
			}
			
		</script>
	</body>
</html>

axios网络请求库 + Vue

1、axios回调函数中的this已经改变，无法访问到data中的数据。可以把this保存起来，回调函数中直接使用保存的this即可。（还可以使用什么箭头函数）

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
            <!--点击按钮切换笑话-->
			<input type="button" value="change joke" @click="getJoke"/>
			<p>{{ joke }}</p>
		</div>
		<script>
			/*
			    接口1:随机笑话
			    请求地址:https://autumnfish.cn/api/joke/list
			    请求方法:get
			    请求参数:num(笑话条数,数字)
			    响应内容:随机笑话
			*/
			var app = new Vue({
				el:"#app",
				data:{
					joke:123
				},
				methods:{
					getJoke:function(){
						var that = this; // 保存this
						console.log(this.joke); // 一开始显示123
						axios.get("https://autumnfish.cn/api/joke")
						.then(function(response){
							// console.log(response);
							console.log(response.data);
							// console.log(this.joke); // this会变化，这里输出undefined
							that.joke=response.data;
						},function(err){
							
						})
					}
				}
			})
		</script>
	</body>
</html>

小例子：天知道

1、回车查询天气
按下回车（v-on.enter）
查询数据（axios接口 v-model）
渲染数据（v-for 数组、that）

天气接口：xxxxxxxxxxxxx

2、点击查询天气
点击城市（v-on 自定义参数）
查询数据
渲染数据

注意：
逻辑代码 js 和页面 html建议分开
axios回调函数中this指向改变了，需要额外保存一份
服务器返回的数据复杂时，使用检查元素查看层级结构

weather.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />

		<title>天知道</title>
		<link rel="stylesheet" href="./css/reset.css" />
		<link rel="stylesheet" href="./css/index.css" />

		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 官网提供的 axios 在线地址 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>

	<body>
		<div class="wrap" id="app">
			<div class="search_form">
				<div class="logo"><img src="./images/logo.png" alt="logo" /></div>
				<div class="form_group">
					<input type="text" class="input_txt" placeholder="请输入查询的天气" @keyup.enter="searchWeather" v-model="city"/>
					<button class="input_sub" @click="searchWeather()">
						搜 索
					</button>
				</div>
				<div class="hotkey">
					<a href="javascript:;" @click="changeCity('北京')">北京</a>
					<a href="javascript:;" @click="changeCity('上海')">上海</a>
					<a href="javascript:;" @click="changeCity('广州')">广州</a>
					<a href="javascript:;" @click="changeCity('深圳')">深圳</a>
				</div>
			</div>
			<ul class="weather_list" >
				<li v-for="item in weatherArr">
					<div class="info_type">
						<span class="iconfont">{{ item.type }}</span>
					</div>
					<div class="info_temp">
						<b>{{ item.low }}</b>
						~
						<b>{{ item.high }}</b>
					</div>
					<div class="info_date">
						<span>{{ item.date }}</span>
					</div>
				</li>
			</ul>
		</div>

		<!-- 引入main.js -->
		<script src="./js/main.js">

		</script>
	</body>

</html>

main.js

/*
  请求地址:http://wthrcdn.etouch.cn/weather_mini
  请求方法:get
  请求参数:city(城市名)
  响应内容:天气信息

  1. 点击回车
  2. 查询数据
  3. 渲染数据
  */
var app = new Vue({
	el:"#app",
	data:{
		city:"",
		weatherArr:[]
	},
	methods:{
		searchWeather:function(){
			var that = this;
			axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
			.then(function(response){
				console.log(response);
				that.weatherArr = response.data.data.forecast;
			})
			.catch(function(err){
				
			})
		},
		
		changeCity:function(city){
			this.city = city; // 点击之后该输入框的城市
			this.searchWeather(); // 查询天气，需要加this
		}
	}
})

在这里插入图片描述

综合应用：音乐播放器

功能：歌曲搜索、歌曲播放、歌曲封面、歌曲评论、播放动画、播放mv

歌曲搜索：按下回车（v-on.enter），查询数据（axios接口 v-model），渲染数据

歌曲播放：点击播放（v-on）、获取歌曲地址并设置（v-bind）

歌曲封面：点击播放（v-on）、获取歌曲封面并设置（v-bind）
在这里插入图片描述

歌曲评论：点击播放（v-on）、获取歌曲评论并渲染（v-for）

播放动画：监听音乐播放（v-on play）、监听音乐暂停（v-on pause）、操作class属性的显示和删除，class属性生效否取决于后面值的真假（v-bind 对象）

播放mv：mv图标的显示和隐藏（v-if）、获取mv地址（axios mvid）、遮罩层（v-show v-on）、设置mv地址（v-bind）

player.html

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>player</title>
		<!-- 样式 -->
		<link rel="stylesheet" href="./css/index.css">
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 官网提供的 axios 在线地址 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>

	<body>
		<div class="wrap">
			<!-- 播放器主体区域 -->
			<div class="play_wrap" id="player">
				<div class="search_bar">
					<img src="images/player_title.png" alt="" />
					<!-- 搜索歌曲 -->
					<input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />
				</div>
				<div class="center_con">
					<!-- 搜索歌曲列表 -->
					<div class='song_wrapper'>
						<ul class="song_list">
							<li v-for="item in musicList">
								<a href="javascript:;" @click="playMusic(item.id)"></a>
									<b>{{ item.name }}</b>
									<!-- mvid不等于0，则显示mv图标 -->
								<span v-if="item.mvid!=0" @click="playMV(item.mvid)"><i></i></span>
							</li>
						</ul>
						<img src="images/line.png" class="switch_btn" alt="">
					</div>
					<!-- 歌曲信息容器 -->
					<!-- 控制class属性的playing显示或者删除 -->
					<div class="player_con" :class="{playing:isPlaying}">
						<img src="images/player_bar.png" class="play_bar" />
						<!-- 黑胶碟片 -->
						<img src="images/disc.png" class="disc autoRotate" />
						<!-- 音乐封面的改变就是改变这里的src -->
						<img :src="musicCover" class="cover autoRotate" />
					</div>
					<!-- 评论容器 -->
					<div class="comment_wrapper">
						<h5 class='title'>热门留言</h5>
						<div class='comment_list'>
							<dl v-for="item in hotComments">
								<!-- 头像 -->
								<dt><img :src="item.user.avatarUrl" alt=""></dt>
								<dd class="name">{{ item.nickname}}</dd>
								<dd class="detail">
									{{ item.content }}
								</dd>
							</dl>
						</div>
						<img src="images/line.png" class="right_line">
					</div>
				</div>
				<div class="audio_con">
					<!-- 播放音乐就是在这里切换src -->
					<audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
				</div>
				<!-- 播放mv -->
				<div class="video_con" v-show="isShow" style="display: none;">
					<video :src="mvUrl" controls="controls"></video>
					<!-- 遮罩层，点击遮罩层关闭mv -->
					<div class="mask" @click="hide"></div>
				</div>
			</div>
		</div>

		<script src="./js/main.js"></script>
	</body>

</html>

main.js

/*
  1:歌曲搜索接口
    请求地址:https://autumnfish.cn/search
    请求方法:get
    请求参数:keywords(查询关键字)
    响应内容:歌曲搜索结果

  2:歌曲url获取接口
    请求地址:https://autumnfish.cn/song/url
    请求方法:get
    请求参数:id(歌曲id)
    响应内容:歌曲url地址
	
  3.歌曲详情获取
    请求地址:https://autumnfish.cn/song/detail
    请求方法:get
    请求参数:ids(歌曲id)
    响应内容:歌曲详情(包括封面信息)
	
  4.热门评论获取
    请求地址:https://autumnfish.cn/comment/hot?type=0
    请求方法:get
    请求参数:id(歌曲id,地址中的type固定为0)
    响应内容:歌曲的热门评论
	
  5.mv地址获取
    请求地址:https://autumnfish.cn/mv/url
    请求方法:get
    请求参数:id(mvid,为0表示没有mv)
    响应内容:mv的地址
*/
var app = new Vue({
  el: "#player",
  data: {
    query: "",// 查询关键字
    musicList: [],// 歌曲数组
    musicUrl: "",// 歌曲地址
    musicCover: "",// 歌曲封面
    hotComments: [],// 歌曲评论
    isPlaying: false,// 动画是否播放
    isShow: false,// 遮罩层是否显示
    mvUrl: ""// mv地址
  },
  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;
          // console.log(response.data.result.songs);
        },
        function(err) {}
      );
    },
	
    // 歌曲播放
    playMusic: function(musicId) {
      //   console.log(musicId);
      var that = this;
      // 调接口，获取歌曲地址
      axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
        function(response) {
          // console.log(response);
          // console.log(response.data.data[0].url);
          that.musicUrl = response.data.data[0].url;
        },
        function(err) {}
      );

      // 歌曲详情获取
      axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(
        function(response) {
          // console.log(response);
          // console.log(response.data.songs[0].al.picUrl);
          that.musicCover = response.data.songs[0].al.picUrl;
        },
        function(err) {}
      );

      // 歌曲评论获取
      axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(
        function(response) {
          // console.log(response);
          // console.log(response.data.hotComments);
          that.hotComments = response.data.hotComments;
        },
        function(err) {}
      );
    },
	
    // 歌曲播放，黑盘转动
    play: function() {
      // console.log("play");
      this.isPlaying = true;
    },
    // 歌曲暂停，黑盘停止转动
    pause: function() {
      // console.log("pause");
      this.isPlaying = false;
    },
	
    // 播放mv
    playMV: function(mvid) {
      var that = this;
      axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(
        function(response) {
          // console.log(response);
          console.log(response.data.data.url);
          that.isShow = true;
          that.mvUrl = response.data.data.url;
        },
        function(err) {}
      );
    },
    // 隐藏
    hide: function() {
      this.isShow = false;
    }
  }
});

在这里插入图片描述

suan奶牛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue学习

Vue 基础(持续更新…)el：挂载点1、el的作用：设置Vue实例挂载/管理的元素2、Vue会管理el命中的元素以及内部的后代元素3、可以使用其他选择器，建议使用id选择器4、可以使用其他的双标签，不能使用和data：数据对象Vue中用到的对象定义在data中，data中可以写简单类型、数组、复杂对象等methods：方法对象本地应用v-text 指令：设置标签的内容，可以使用 {{ xx }}<html> <head> <title>v
复制链接

扫一扫