一、Vue基础
课程详情：黑马VUE学习笔记—后端小白入门（附带项目天气预报和音乐播放器所有源码）
视频地址：https://www.bilibili.com/video/BV12J411m7MG?p=37&share_source=copy_web
课程源代码：链接：https://pan.baidu.com/s/1yQMpgrHDPMnGYkmwfgRseQ
提取码：1234
提前掌握基础知识：HTML、CSS、JavaScript、AJAX
工具：VSCode、插件Live Server
课程安排：1. Vue基础 2. 本地应用 3. 网络应用 4. 综合应用
参考博客文章：https://blog.csdn.net/cjdxyang/article/details/121122938
01 第一个vue程序
特点
1）JavaScript框架
2）简化Dom操作
3）响应式数据驱动
步骤
1）导入开发版本的Vue.js
2）创建Vue实例对象，设置el属性和data属性
3）使用简洁的模板语法把数据渲染到页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue基础</title>
</head>
<body>
<!-- 3、使用简洁的模板语法把数据渲染到页面上-->
<div id="app" class="app">
<span>{{message}}</span>
</div>
<!-- 1、开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({ /* 2、创建Vue实例对象，设置el属性和data属性*/
el: '#app', // 挂载点，一般使用ID选择器
data: { // 数据对象
message: 'Hello 万季玲!'
}
})
</script>
</body>
</html>
官方文档：https://cn.vuejs.org
官方文档上也有讲解使用实例的视频。
02 el 挂载点
1）el是用来设置Vue实例挂载（管理）的元素
2）Vue实例的作用范围：在el命中的元素内部可以被渲染，el选项命中的元素及其内部的后代元素
3）除了ID选择器，可以使用其他的选择器，建议使用ID选择器
4）除了div标签，可以使用其他的双标签，不能使用HTML和BODY
03 data 数据对象
1）Vue中用到的数据定义在data中
2）data中可以写复杂类型的数据
3）渲染复杂类型数据时,遵守js的语法即可
Vue中用到的数据定义在data中, data中可以写复杂类型的数据，例如array，obj等类型数据
var app = new Vue({ /* 2、创建Vue实例对象，设置el属性和data属性*/
el: '#app', // 挂载点，一般使用ID选择器
data: { // 数据对象
message: '你好！',
school:{ //object对象
name:"huabei",
mobile:"112"
},
campus:["school1","school2","school3"] //数组
}
})
渲染复杂类型数据时,遵守js的语法即可
<div id="app" class="app">
字符串：{{message}} </br> <!--字符串-->
对象：{{school}} </br> <!--对象-->
对象属性：{{school.name}} {{school.mobile}} </br> <!--对象属性-->
数组：{{campus}} </br> <!--数组 及 数组元素-->
数组元素：{{ campus[0] }} {{ campus[1] }} {{ campus[2] }}
</div>
二、本地应用
04 本地应用-介绍
- 通过Vue实现常见的网页效果
- 学习Vue指令，以案例巩固知识
- Vue指令指的是，以v-开头的一组特殊语法
(1) 内容绑定、事件绑定 v-text、v-html、v-on(@)基础
(2) 显示切换、属性绑定 v-show、v-if、v-bind(:)
(3) 列表循环,表单元素绑定 v-for、v-on补充、v-model
05 本地应用 v-text
1）v-text指令的作用：设置标签的内容（textContent）
2）默认写法会替换全部内容，使用差值表达式{undefined{}}可以替换指定内容。（如本例中”深圳的显示”）
3）内部支持写表达式（如字符串拼接）
var app = new Vue({
el: '#app',
data: {
msg:"你好！"
}
})
<div id="app">
<h3 v-text="msg+'!'">毛毛</h3>
<h3>{{msg + '!'}}毛毛</h3>
</div>
测试结果：
你好！!
你好！！毛毛
06 本地应用 v-html
1）v-html指令的作用是:设置元素的innerHTML
2）内容中有html结构会被解析为标签
3）v-text指令无论内容是什么,只会解析为文本
4）解析文本使用v-text,需要解析html结构使用v-html
var app = new Vue({
el: '#app',
data: {
msg:"<a href=\"#\">这是一个链接</a>"
}
})
<div id="app">
<h3>{{msg}}</h3>
<h3 v-text="msg"></h3>
<h3 v-html="msg"></h3>
</div>
测试结果：
<a href="#">这是一个链接</a>
<a href="#">这是一个链接</a>
这是一个链接
比较：
v-html：解析html结构
v-text： 解析文本
07.本地应用 v-on
1）v-on指令的作用是:为元素绑定事件绑定的方法2）定义在methods属性中
3）指令可以简写为@
4）在元素中用v-on或@绑定事件，@click="myMethod"
5）方法内部可以通过this关键字访问定义在data中的数据
var app = new Vue({
el: '#app',
data:{
msg:"我是"
},
methods: {
myclick:function (){
alert("鼠标点击事件完成！")
},
addname:function (){
this.msg += "毛毛" //方法内部可以通过this关键字访问定义在data中的数据
}
}
})
<div id="app">
<input type="button" value="v-on指令" v-on:click="myclick">
<input type="button" value="v-on简写成@" @click="myclick">
<input type="button" value="添加名字" @click="addname"></input> </br>
{{msg}}
</div>
08 本地应用 示例：计数器
思路：
1）data中定义数据:比如num
2）methods中添加两个方法:比如add(递增),sub(递减)
3）使用v-text将num设置给span标签
4）使用v-on将add,sub分别绑定给+,按钮
5）累加的逻辑:小于5累加,否则提示。递减的逻辑:大于0递减否则提示
var app = new Vue({
el: '#app',
data:{
num:1
},
methods:{
sub:function (){ //减法
if(this.num>0){
this.num--;
}else{
alert("别点啦，到底啦！")
}
},
add:function (){ //加法
if(this.num<5){
this.num++;
}else{
alert("别点啦，已经超过5啦！")
}
}
}
<div id="app">
<button @click="sub">-</button>
<span>{{ num }}</span>
<button @click="add">+</button>
</div>
总结：
1）引入Vuejs的开发环境文件
2）创建Vue示例时:el(挂载点),data(数据),methods(方法);
3）v-on指令的作用是绑定事件,简写为@；
4）方法中通过this,关键字获取data中的数据；
5）v-text指令的作用是:设置元素的文本值简写为{{}};
6）v-html指令的作用是:设置元素的innerHTML;
09 本地应用 v-show
1）根据布尔值，切换元素的显示和隐藏(操纵display样式)。
2）后面的内容,最终都会解析为布尔值。
3）值为true元素显示,值为false元素隐藏。
4）数据改变之后，对应元素的显示状态会同步更新。
5）方法中this.isShow = !this.isShow可以切换显示状态
<script>
var app = new Vue({
el: '#app',
data:{
age:16,
isShow:false
},
methods:{
changeShow:function (){ //切换显示状态
this.isShow = !this.isShow
}
}
})
</script>
<div id="app">
<button @click="changeShow">切换显示状态</button>
<img v-show="isShow" src="/img/mm.jpg" alt="" style="height: 100px"> <!--切换显示状态-->
<img src="/img/mm.jpg" alt="" v-show="true" style="height: 100px"> <!--显示-->
<img src="/img/mm.jpg" alt="" v-show="age>=8" style="height: 100px"> <!--显示-->
</div>
10 本地应用 v-if指令
1）根据布尔值,切换元素的显示和隐藏(操纵dom元素)。
2）表达式的值为true,元素存在于dom树中
3）为false,从dom树中移除。
4）频繁的切换v-show,反之使用v-if,前者的切换消耗小
5）v-if和v-show的区别 v-show直接修改display 而v-if是直接抹除标签
<script>
var app = new Vue({
el: '#app',
data:{
isShow:false
},
methods:{
changeShow:function (){ //切换显示状态
this.isShow = !this.isShow
}
}
})
</script>
<div id="app">
<button @click="changeShow">切换显示状态</button>
<p v-if="isShow">这是一个p段落</p>
</div>
比较 v-show 和 v-if
v-show：根据布尔值，切换元素的显示和隐藏(操纵display样式)， 值为true元素显示,值为false元素隐藏。 数据改变之后，对应元素的显示状态会同步更新。
v-if： 根据布尔值,切换元素的显示和隐藏(操纵dom元素)。 表达式的值为true,元素存在于dom树中,为false,从dom树中移除。
【注】频繁切换使用v-show，反之使用v-if，前者的切换消耗小。两者用法一样，其中的值可以是布尔值、表达式、data变量，但是实现的原理不一样，前者改变样式，后者操作dom树。
11 本地应用 v-bind指令
1）v-bind指令的作用是:为元素绑定属性，设置元素的属性(比如:src,title,class)
2）v-bind:属性名=表达式
3）简写的话可以直接省略v-bind,可以简写成:属性名=表达式
4）需要动态的增删class建议使用对象的方式
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"img/mm.jpg",
imgTillte:"毛毛手绘",
isActive:false
},
methods:{
toggleActive:function (){
this.isActive = !this.isActive
}
}
})
</script>
<!--
为img标签的src属性绑定data中imgSrc值
为img标签的title属性绑定data中imgTitle值
设置img标签的class属性为active，并绑定data中isActive值，这里设置active类的样式`:class="{active:isActive}"`
添加一个点击事件改变isActive值，决定active类的样式是否生效，从而达到切换样式的效果
-->
<img :src="imgSrc" :title="imgTillte" :class="{active:isActive}" @click="toggleActive" alt="">
<div id="app">
<img v-bind:src="imgSrc" v-bind:title="imgTillte" alt="">
<img :src="imgSrc" :title="imgTillte"
:class="{active:isActive}" @click="toggleActive" alt="">
</div>
12 本地应用 示例：图片切换
1） 定义图片数组 imgArr:[ ]
2）添加图片索引 index:0
3）v-bind绑定src属性 <img :src="imgList[index]">
4）v-on图片切换逻辑 methods中prev,next并且<a @click="prev"> <a @click="next">
5）v-show显示状态切换
<!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>图片切换示例</title>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<div id="mask">
<div class="center">
<h2 class="title"><img src="./images/logo.jpg" alt="">毛毛宣传栏</h2>
<!-- 2、绑定src属性，放入图片资源，通过改变索引值更换图片 -->
<img :src="imgList[index]" alt="" />
<!-- 4、@click="prev" 定义方法后，绑定点击事件-->
<!-- 5、v-show="index>0" 显示状态切换 首页，上一张按钮隐藏-->
<a @click="prev" v-show="index>0" href="javascript:void(0)" class="left">
<img src="./images/prev.png" alt="" />
</a>
<!-- 5、v-show="index<imgList.length-1" 尾页，下一张按钮隐藏-->
<a @click="next" v-show="index<imgList.length-1" href="javascript:void(0)" class="right">
<img src="./images/next.png" alt="" />
</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#mask",
data: { // 1、定义资源 图片数组和索引
imgList: [ //图片数组
"./images/IMG.jpg",
"./images/IMG_001.jpg",
"./images/IMG_002.jpg",
"./images/IMG_003.jpg",
"./images/IMG_004.jpg",
],
index: 0 //索引
},
methods: { // 3、定义方法，上一张和下一张
prev() {// 上一张
this.index--;
},
next() {// 下一张
this.index++;
}
}
});
</script>
</body>
</html>
13 本地应用 v-for
1）v-for指令的作用是:根据数据生成列表结构
2）数组经常和v-for结合使用
3）语法是( item,index ) in 数据
4）item和index可以结合其他指令起使用,push和shift
5）数组长度的更新会同步到页面上，是响应式的
模板
<div id="app">
<ul>
<li v-for="(item,index) in arr" :title="item">
{{ index }}{{ item }}
</li>
<li v-for="(item,index) in objArr">
{{ item.name }}
</li>
</ul>
</div>
示例：
<body>
<div id="app">
<input type="button" value="添加" @click="add">
<input type="button" value="删除" @click="remove">
<ul>
<!--v-for 根据数据生成列表结构 -->
<li v-for="(item,index) in arr" :title="item">
{{index+1}}城市{{item}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app =new Vue({
el:"#app",
data:{
arr:["北京","上海","广州"]
},
methods:{
add:function(){ //添加
this.arr.push("武汉");
},
remove:function(){ //删除 第一条数据
this.arr.shift();
}
}
})
</script>
</body>
14 本地应用 v-on补充
作用：传递自定义参数，事件修饰符
1）事件绑定的方法写成函数调用的形式，可以传入自定义参数
2）定义方法时需要定义形参来接收传入的实参
3）事件的后面跟上.修饰符可以对事件进行限制
4）.enter可以限制触发的按键为回车
5）事件修饰符有多种：https://cn.vuejs.org/v2/api/#v-on
模板
<div id="app">
<input type="button" @click="doIt(p1,p2)" />
<input type="text" @keyup.enter="sayHi">
</div>
var app = new Vue({
el: "#app",
methods: {
doIt: function(p1,p2) {},
sayHi:function(){}
}
})
示例
<body>
<!-- 2.html结构 -->
<!--自定义参数 这里用@click="doIt(666,'老铁') -->
<input type="button" value="点击" @click="doIt(666,'老铁')">
<!--回车键的事件修饰符 @keyup.enter="sayHi"-->
<input type="text" @keyup.enter="sayHi">
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 3.创建Vue实例 -->
<script>
var app=new Vue({
el:"#app",
doIt:function(p1,p2){ //传入参数
console.log("做it");
console.log(p1);
console.log(p2);
},
sayHi:function(){ //事件修饰符触发的事件
alert("吃了没");
}
}
})
</script>
</body>
</html>
15 本地应用 v-model
1）v-model：获取和设置表单元素的值(双向数据绑定)
2）v-model指令的作用：便捷的设置和获取表单元素的值
3）绑定的数据会和表单元素值相关联
4）绑定的数据←→表单元素的值
<div id="app">
<!--绑定点击事件，修改message的值为 酷丁鱼 -->
<input type="button" value="修改message" @click="setMsg">
<!--双向绑定，v-model，在文本框中输入的同时修改了message的值-->
<!--点击回车，弹出message的值-->
<input type="text" v-model="message" @keyup.enter="getMsg">
<h2>{{ message }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"毛毛"
},
methods: {
getMsg:function(){
alert(this.message);
},
setMsg:function(){
this.message ="酷丁鱼";
}
},
})
</script>
16 本地应用 示例：小黑记事本
1、新增
（1）生成列表结构(v-for和数组)
（2）获取用户输入(v-model)
（3）回车,新增数据(v-on .enter 添加数据)
（4）总结
1）v-for指令的作用
2）v-model指令的作用
3）v-on指令,事件修饰符
4）通过审查元素快速定位
2、删除
（1）数据改变，和数据绑定的元素同步改变
（2）事件可以接收自定义的参数
（3）splice的作用：根据索引删除对应元素
3、统计
（1）基于数据的开发方式
（2）v-text指令是设置文本，也可以用插值表达式{undefined{}}
4、清空
（1）基于数据的开发方式-清空数组即可
5、隐藏
（1）没有数据时，隐藏元素（数组非空时v-if v-show ）
6、总结
（1） 列表结构可以通过v-for指令结合数据生成
（2） v-on结合事件修饰符可以对事件进行限制,比如.enter
（3） v-on在绑定事件时可以传递自定义参数
（4） 通过v-model可以快速的设置和获取表单元素的值
（5） 基于数据的开发方式
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>小黑记事本</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>小黑记事本</h1>
<!--1.2 获取用户输入v-model 1.3 回车绑定增加事件@keyup.enter -->
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
class="new-todo" />
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list"> <!--1.1 生成列表结构 v-for-->
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{ index+1 }}.</span>
<label>{{ item }}</label>
<!--2.1 绑定删除事件@click="remove(index)",参数为index-->
<button class="destroy" @click="remove(index)">删除</button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer" v-show="list.length!=0">
<span class="todo-count" v-show="list.length!=0">
<!--3.1 统计信息个数，用v-text或{{}}表达式 -->
<strong>{{list.length}}</strong> items left
</span>
<!--5.1 没有数据时，隐藏元素（数组非空时 v-if v-show ）-->
<button v-show="list.length!=0" class="clear-completed" @click="clear">Clear</button>
</footer>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#todoapp",
data: {
list: ["写代码", "吃饭饭", "睡觉觉"],
inputValue: "好好学习,天天向上"
},
methods: {
add: function () { //数组添加数据
this.list.push(this.inputValue);
},
remove:function(index){ //2.2 数组删除数据，事件接受自定义参数
console.log("删除");
console.log(index);
//2.3 splice 根据索引删除对应元素
this.list.splice(index,1);
},
clear:function(){ //4.1 清空数组
this.list=[];
}
},
})
</script>
</body>
</html>
三、网络应用
17 网络应用 介绍
1）Vue结合网络数据开发应用
2）axios-网络请求库
3）axios+vue-结合Vue一起
4）天气预报案例
18 网络应用 axios基本使用
要点
1）axios：功能强大的网络请求库
2）axios必须先导入才可以使用
3）使用get或post方法即可发送对应的请求
4）then方法中的回调函数会在请求成功或失败时触发
5）通过回调函数的形参可以获取响应内容,或错误信息
6）文档传送门：https://github.com/axios/axios
7）axios官网文档：
文档一：http://www.axios-js.com/zh-cn/docs/
文档二：https://www.axios-http.cn/docs/intro
模板
//axios必须先导入才可以使用
//使用get或post方法 发送对应的请求
//then方法 触发 请求成功或失败 的回调函数
//通过回调函数的形参 可以获取响应内容,或错误信息
axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>25-网络应用- axios基本使用</title>
</head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
document.querySelector(".get").onclick=function(){
axios.get("https://autumnfish.cn/api/joke/list?num=3")
.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:"阿香"})
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
</script>
</body>
</html>
19 网络应用 axios与vue结合使用
1）axios回调函数中的this已经改变,无法访问到data中数据
2）把回调函数写成箭头函数=>，再直接使用this即可
3）和本地应用的最大区别就是改变了数据来源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>26-网络应用- axios与vue结合使用</title>
</head>
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p>{{joke}}</p>
</div>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/*
接口:随机获取一条笑话
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话
*/
var app = new Vue({
el:"#app",
data:{
joke:"很好笑的笑话"
},
methods: {
getJoke:function(){
axios.get("https://autumnfish.cn/api/joke")
.then((response)=>{
// console.log(response)
console.log(response.data);
// console.log(this.joke);
this.joke = response.data;
},function (err) {
console.log(err)
})
}
},
})
</script>
</body>
</html>
20 网络应用 天知道
思路
1）按下回车(v-on .enter)
2）查询数据(axios 接口 v-model )
3）渲染数据(v-for 数组 that)
注意
1）应用的逻辑代码建议和页面分离，使用单独的js文件编写
2）axios回调函数写成箭头函数=>，再直接使用this即可，保证this指向不改变
3）服务器返回的数据比较复杂时，获取的时候需要注意层级结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>天知道</title>
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="form_group">
<!--输入城市city双向绑定 回车 调用查询天气函数 -->
<input type="text" class="input_txt" placeholder="请输入查询的天气" v-model="city" @keyup.enter="queryWeather" />
<!--输入城市city双向绑定 点击按钮 调用查询天气函数 -->
<button class="input_sub" @click="queryWeather">搜 索</button>
</div>
<div class="hotkey"> <!--热点城市-->
<a href="javascript:;" v-for="city in hotCitys" @click="clickSearch(city)">{{ city }}</a>
</div>
</div>
<ul class="weather_list">
<li v-for="(item,index) in forecastList">
<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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
city: "郑州",
forecastList: [],
hotCitys: ["北京", "上海", "广州", "深圳"]
},
methods: {
queryWeather() { // 查询天气信息
this.forecastList = [];
axios.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`)
.then(res => {
console.log(res);
//注意多层结构的数据获取
this.forecastList = res.data.data.forecast;
}).catch(err => {
console.log(err);
}).finally(() => { });
},
clickSearch(city) { //搜索框点击搜索，传入城市的参数，调用查询天气信息的函数
this.city = city;
this.queryWeather();
}
}
});
</script>
</body>
</html>
四、综合应用
21 综合应用（音乐播放器）介绍
代码地址：https://pan.baidu.com/s/1yQMpgrHDPMnGYkmwfgRseQ
提取码：1234
介绍
1）歌曲搜索
2）歌曲播放
3）歌曲封面
4）歌曲评论
5）播放动画
6）mv播放
22 综合应用 歌曲搜索
1）按下回车(v-on .enter)
2）查询数据(axios 接口 v-model )
3）渲染数据(v-for 数组 that)
23 综合应用 歌曲播放
-
点击播放(v-on 自定义参数)
点击播放按钮：播放歌曲的本质就是设置歌曲的src，切换歌曲就是更换不同的src，歌曲的地址从network查看，歌曲地址是通过接口获取到的，获取歌曲地址后找到歌曲播放地址，将播放地址存到data的musicUrl字段中，再传给给audio标签；
注：点击时需要传入参数，从接口获得的歌曲的点击事件才会才会被绑定。 -
歌曲地址获取：
根据接口确定一个传递的参数（歌曲id），搜索出的歌曲时服务器返回的结果数组中每一项都有歌曲id，不同歌曲id不同，但查询逻辑是一样的；（总：接口调用，把所需的参数传过去） -
歌曲地址设置(v-bind)
data中增加歌曲属性，歌曲id依赖与歌曲的搜索结果，v-bind绑定到播放条中。
24 综合应用 歌曲封面
25 综合应用 播放动画
-
监听音乐播放(v-on play)
核心：增删一个类
播放时碟片旋转，暂停时停时旋转，检测动画的播放状态，在对应的事件中增删类名， -
监听音乐暂停(v-on pause)
-
操纵类名(v-bind 对象)
audio标签的play事件会在音频播放的时候触发
audio标签的pause事件会在音频暂停的时候触发
通过对象的方式设置类名，类名生效与否取决于后面值的真假
26 综合应用 播放mv
- mv图标显示(v-if)
- mv地址获取
- 遮罩层
- mv地址设置
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
