vue入门
一、vue基础
1.1 vue简介
- JavaScript框架
- 简化Dom操作
- 响应式数据驱动
1.2 第一个vue程序
文档传送门:https://cn.vuejs.org/
- 导入开发版本的 Vue.js
- 创建 Vue 实例对象,设置 el 属性和 data 属性
- 使用简洁的模板语法把数据渲染到页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"你好,john!"
}
})
</script>
</body>
</html>
1.3 el:挂载点
el 是用来设置 Vue 实例挂载(管理)的元素
Vue 实例的作用范围是什么呢?
Vue 会管理 el 宣子昂命中的元素及其内部的后代元素
是否可以使用其他选择器?
可以使用其他选择器,但是建议使用 ID选择器
是否可以设置其他的 dom 元素呢?
可以使用其他的双标签,不能使用 html 和 body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h2 id="app" class="app">
{{message}}
<span>{{message}}</span>
</h2>
<script>
var app = new Vue({
// el:"#app",
// el:".app",
el:"div",
data:{
message:"el:挂载点!"
}
})
</script>
</body>
</html>
1.4 data:数据对象
- Vue 中用到的数据定义在 data 中
- data 中可以写复杂类型的数据
- 渲染复杂类型数据时,遵守 js 的语法即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<h2>{{school.name}} {{school.moblie}}</h2>
<ul>
<li>{{campus[0]}}</li>
<li>{{campus[2]}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:"#app",
data: {
message: "hello world",
school:{
name:"szu",
moblie:"888888"
},
campus:["丽湖校区","粤海校区","沧海校区"]
}
})
</script>
</body>
</html>
二、本地应用
2.1 内容绑定,事件绑定
v-text
- v-text 指令的作用时:设置标签的内容(textContent)
- 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
- 支持写表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2 v-text="message+'!'">sz</h2>
<h2 v-text="info+'!'">sz</h2>
<h2>{{message+'!'}}sz</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"v-text!!!",
info:"information"
}
})
</script>
</body>
</html>
v-html
- v-html 指令的作用是:设置元素的 innerHTML
- 内容中有 html 的结构会被解析为标签
- v-html 指令无论内容时什么,指挥解析为文本
- 解析文本使用 v-text,需要解析 html 结构使用 v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/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:"v-html"
content:"<a href='https://www.szu.edu.cn'>深圳大学</a>"
}
})
</script>
</body>
</html>
v-on
- v-on 指令的作用是:为元素绑定事件
- 事件名不需要写 on
- 指令可以简写为 @
- 绑定的方法定义在 methods 属性中
- 方法内部通过 this 关键字可以访问定义在 data 中数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="v-on简写" @click="doIt">
<input type="button" value="v-on双击" @dblclick="doIt">
<h2 @click="changeFood">{{food}}</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
food:"西兰花炒蛋"
},
methods:{
doIt:function (){
alert("做It");
},
changeFood: function () {
// console.log(this.food);
this.food+="好好吃!";
}
}
})
</script>
</body>
</html>
实例
- 创建 Vue 实例时:el(挂载点),data(数据),methods(方法)
- v-on 指令的作用时绑定事件,简写为 @
- 方法中通过 this ,关键字获取 data 中的数据
- v-text 指令的作用时:设置元素的文本值,简写为{{}}
- v-html 指令的作用是:设置元素的 innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
add:function (){
if (this.num < 10){
this.num++;
}else alert("别点了,最大了!");
},
sub: function () {
if (this.num > 0){
this.num--;
}else alert("别点了,最小了!");
}
}
})
</script>
</body>
</html>
2.2 显示切换,属性绑定
v-show
- v-show 指令的作用是根据表达式的真假,切换元素的显示和隐藏
- 修改元素的 display,实现显示隐藏
- 指令后面的内容,最终都会解析为布尔值
- 值为 true 元素显示,值为 false 元素隐藏
- 数据改变之后,对应元素的显示状态会同步更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow">
<a href="https://www.baidu.com" v-show="isShow">baidu</a>
<input type="button" value="累加年龄" @click="addAge">
<a href="#" v-show="age>=18">嘿嘿嘿</a>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:17
},
methods:{
changeIsShow:function (){
this.isShow = !this.isShow;
},
addAge:function (){
this.age++;
}
}
})
</script>
</body>
</html>
v-if
- v-if 指令的作用是:根据表达式的真假,切换元素的显示和隐藏(操作dom元素)
- 本质是通过操纵 dom 元素来切换显示状态
- 表达式的值为 true,元素存在于 dom 数中,为 false,从 dom 树中移除
- 频繁的切换 v-show,反之使用 v-if,前者切换消耗小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="切换显示" @click="toggleIsShow">
<p v-if="isShow">hello world</p>
<p v-show="isShow">hello world - v-show修饰</p>
<h2 v-if="tempreature>=35">热死了</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
tempreature:20
},
methods:{
toggleIsShow:function (){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
</html>
v-bind
- v-bind 指令的作用是:设置元素的属性(比如:src,title,class)
- 完整写法式 v-bind:属性名
- 简写的话可以直接省略 v-bind,只保留 :属性名
- 需要动态的增删 class 建议使用对象的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<a v-bind:href="aHref">baidu</a>
<br>
<a :href="aHref" :title="aTitle+'!!!'"
:class="isActive?'active':''" @click="toggleActive">baidu</a>
<br>
<a :href="aHref" :title="aTitle+'!!!'"
:class="{active:isActive}" @click="toggleActive">baidu</a>
</div>
<script>
var app = new Vue({
el:"#app",
data: {
aHref: "https://www.baidu.com",
aTitle:"baidu",
isActive:false
},
methods:{
toggleActive:function (){
this.isActive = !this.isActive;
}
}
})
</script>
</body>
</html>
实例
- 列表数据使用数组保存
- v-bind 指令可以设置元素属性,比如 src
- v-show 和 v-if 都可以切换元素的显示状态,频繁切换用 v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<img :src="imgArr[index]" alt=""/>
<a href="#" @click="prev" v-show="index != 0">上一张</a>
<a href="#" @click="next" v-show="index < imgArr.length-1">下一张</a>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
imgArr:[
"./img/00.jpg",
"./img/01.jpg",
"./img/02.jpg",
"./img/03.jpg",
"./img/04.jpg",
"./img/05.jpg",
"./img/06.jpg",
"./img/07.jpg",
"./img/08.jpg",
],
index:0
},
methods:{
prev:function (){
this.index--;
},
next:function (){
this.index++;
}
}
})
</script>
</body>
</html>
2.3 列表循环,表单元素绑定
v-for
- v-for 指令的作用是:根据数据生成列表结构
- 数组经常和 v-for 结合使用
- 语法是 (item,index) in 数据
- item 和 index 可以结合其他指令一起使用
- 数组长度的更新会同步到页面上,是响应式的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" @click="add" value="添加数据">
<input type="button" @click="remove" value="移除数据">
<ul>
<li v-for="(x,index) in arr">
{{ index+1 }}深圳大学校区:{{ x }}
</li>
</ul>
<h2 v-for="item in vegetable" v-bind:title="item.name">
{{item.name}}
</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["丽湖","粤海","沧海"],
vegetable:[
{name:"西兰花炒蛋"},
{name:"蛋炒西兰花"}
]
},
methods:{
add:function (){
this.vegetable.push({name:"花菜炒蛋"});
},
remove:function (){
this.vegetable.shift();
}
}
})
</script>
</body>
</html>
v-on 补充
传递自定义参数,事件修饰符
文档传送门:https://cn.vuejs.org/v2/api/#v-on
- 事件绑定的方法写成函数调用的形式,可以传入自定义参数
- 定义方法时需要定义形参来接收传入的实参
- 事件的后面跟上 .修饰符 可以对事件进行限制
- .enter 可以显示触发的按键为回车
- 事件修饰符有多种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="doIt(666,'老铁')">点击</button>
<input type="text" @keyup.enter="sayHi">
</div>
<script>
var app = new Vue({
el:"#app",
methods:{
doIt:function (p1,p2){
console.log("做It");
console.log(p1,p2);
},
sayHi:function (){
alert("吃了没");
}
}
})
</script>
</body>
</html>
v-model
- v-model 指令的作用是便捷获取和设置表单元素的值(双向数据绑定)
- 绑定的数据会和表单元素相关联
- 绑定的数据:left_right_arrow:表单元素的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="修改message" @click="setM">
<input type="text" v-model="message" @keyup.enter="getM">
<h2>{{message}}</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"hello world",
},
methods:{
getM:function (){
alert(this.message)
},
setM:function (){
this.message = "byebye"
}
}
})
</script>
</body>
</html>
实例(记事本)
功能:
- 新增:
- 生成列表结构(v-for 数组)
- 获取用户输入(v-model)
- 回车,新增数据(v-on.enter 添加数据)
- 删除:
- 点击删除指定内容(v-on splice 索引)
- 统计:
- 统计信息个数(v-text length)
- 清空:
- 点击清除所有信息(v-on)
- 隐藏:
- 没有数据时,隐藏元素(v-show v-if 数组非空)
重点:
- 列表结构可以通过 v-for 指令结合数据生成
- v-on 结合事件修饰符可以对事件进行限制,比如 .enter
- v-on 在绑定事件时可以传递自定义参数
- 通过 v-model 可以快速的设置和获取表单元素的值
- 基于数据的开发方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>记事本</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--主体区域-->
<section id="todoapp">
<!--输入框-->
<header class="header">
<h1>记事本</h1>
<input v-model="inputValue" @keyup.enter="add"
autofocus="autofocus" placeholder="请输入任务" class="new-todo">
</header>
<!--列表区域-->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{index + 1}}</span>
<label>{{ item }}</label>
<button class="destory" @click="remove(index)">x</button>
</div>
</li>
</ul>
</section>
<!--列表清空-->
<footer class="footer">
<span class="todo-count" v-show="list.length !== 0">
<strong>{{list.length}}</strong>
items left
</span>
<button class="clear-completed" @click="clear" v-if="list.length !== 0">Clear</button>
</footer>
</section>
<!--底部-->
<footer class="info">
</footer>
<script>
var app = new Vue({
el:"#todoapp",
data:{
list:["粤海","沧海","丽湖"],
inputValue:"好好学习,天天向上"
},
methods:{
add:function (){
this.list.push(this.inputValue);
},
remove:function (index){
this.list.splice(index,1);
},
clear:function (){
this.list = [];
}
}
})
</script>
</body>
</html>
三、网络应用
Vue结合网络数据开发应用
3.1 axios
功能强大的网络请求库
<script src="https://unpkg.com/axios/dist/axios.min,js"></script>
<script>
axios.get(地址?key=value$key2=value2).then(function(respose){},function(err){});
axios.post(地址,key=value,key2=value2).then(function(respose){},function(err){});
</script>
- axios 必须先导入才可以使用
- 使用 get 或 post 方法即可发送对应的请求
- then 方法中的回调函数会在请求成功或失败时触发
- 通过回调函数的形式可以获取相应内容,或错误信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<script>
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);
});
}
document.querySelector(".post").onclick = function (){
axios.post("https://autumnfish.cn/api/user/reg",
{username:"红烧西兰花"})
.then(function (response) {
console.log(response);
},function(err){
console.log(err);
});
}
</script>
</body>
</html>
3.2 axios+vue
axios 如何结合 vue 开发网络应用
- axios 回调函数中的 this 已经改变,无法访问到 data 中数据
- 把 this 保存起来,回调函数中直接使用保存的 this 即可
- 和本地应用的最大区别时改变了数据来源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p>{{joke}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
joke:"很好笑的笑话"
},
methods:{
getJoke:function (){
var that = this;
axios.get("https://autumnfish.cn/api/joke")
.then(function (response){
that.joke = response.data;
},function (err){
console.log(err);
});
}
}
})
</script>
</body>
</html>
实例(天气查询)
功能:
- 回车查询
- 按下回车(v-on.enter)
- 查询数据(axios 接口 v-model)
- 渲染数据(v-for 数组 that 或使用箭头函数)
- 应用的逻辑代码建议和页面分离,使用单独的 js 文件编写
- axios 回调函数中 this 指向改变了,需要额外保存一份
- 服务器返回的数据比较复杂时,获取的时候需要注意层级结构
- 点击查询
- 点击城市(v-on 自定义参数)
- 查询数据(this.方法())
- 渲染数据(this.方法())
- 自定义参数可以让代码的复用性更高
- methods 中定义的方法内部,可以通过 this 关键字点出其他的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><h1>天知道</h1></div>
<div class="form_group">
<input type="text" @keyup.enter="searchWeather" v-model="city"
class="input_txt" placeholder="请输入查询的天气">
<button class="input_sub" @click="searchWeather">搜索</button>
</div>
</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>
<ul class="weather_list">
<li v-for="item in weatherList">
<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>
<script src="./main.js"></script>
</body>
</html>
var app = new Vue({
el:"#app",
data:{
city:"",
weatherList:[]
},
methods:{
searchWeather:function (){
// var that = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
.then((response)=>{
// console.log(response.data.data.forecast);
this.weatherList = response.data.data.forecast;
},function (err){
console.log(err);
});
},
changeCity:function (city){
this.city = city;
this.searchWeather();
}
}
})
四、综合应用(播放器)
4.1 歌曲搜索
- 按下回车(v-on.enter)
- 查询数据(axios 接口 v-model)
- 渲染数据(v-for 数组 that 或使用箭头函数)
- 服务器返回的数据比较复杂时,获取的时候需要注意层级结构
- 通过审查元素快速定位到需要操纵的元素
4.2 歌曲播放
- 点击播放(v-on 自定义参数)
- 歌曲地址获取(接口 歌曲id)
- 歌曲地址设置(v-bind)
- 歌曲id依赖歌曲搜索的结果,对于不用的数据也需要关注
4.3 歌曲封面
- 点击播放(增加逻辑)
- 歌曲封面获取(接口 歌曲id)
- 歌曲封面设置(v-bind)
- 在vue中通过 v-bind 操纵元素
- 本地无法获取的数据,基本都会有对应的接口
4.4 歌曲评论
- 点击播放(增加逻辑)
- 歌曲评论获取(接口 歌曲id)
- 歌曲评论渲染
- 在 vue中通过 v-for 生成列表
4.5 播放动画
- 监听音乐播放(v-on play)
- 监听音乐暂停(v-on pause)
- 操纵类名(v-bind 对象)
- audio 标签的 play 事件会在音频播放的时候触发
- audio 标签的 pause 事件会在音频暂停的时候触发
- 通过对象的方式设置类名,类名生效与否取决于后面值得真假
4.6 mv播放
- mv图标显示(v-if)
- mv地址获取(接口 mvid)
- 遮罩层(v-show v-on)
- mv地址设置(v-bind)
4.7 综合应用重点
- 不同接口需要得数据是不同的
- 页面结构复杂之后,通过审查元素的方式取快速定位相关元素
- 响应式的数据都需要在 data 中定义
<!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">
</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>
<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>
<!-- 歌曲信息容器 -->
<div class="player_con" :class="{playing:isPlaying}">
<img src="images/player_bar.png" class="play_bar" />
<!-- 黑胶碟片 -->
<img src="images/disc.png" class="disc autoRotate" />
<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.user.nickname}}</dd>
<dd class="detail">
{{item.content}}
</dd>
</dl>
</div>
<img src="images/line.png" class="right_line">
</div>
</div>
<div class="audio_con">
<audio ref='audio' @play="play" @pause="pause" :src="musicUrl"
controls autoplay loop class="myaudio" ></audio>
</div>
<div class="video_con" v-show="isShow" style="display: none;">
<video :src="mvUrl" controls="controls"></video>
<div class="mask" @click="hide"></div>
</div>
</div>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
/*
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,
// mv地址
mvUrl: ""
},
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;
this.mvUrl = '';
}
}
});