本文是我心血来潮学习Vue框架所做的笔记，也供童鞋们学习参考。作为后端的开发人员，学习前端的Vue框架只是单纯地去了解下前端框架的内容，所以并没有深入地去学习，因此本文只适合Vue入门的童鞋哦。由于我的能力有限，所写的内容可能有错误，小伙伴们可以在评论区中进行讨论。这篇笔记是根据哔哩哔哩大学中黑马程序员up主的视频内容进行记录的。视频地址：前端基础必会教程-4个小时带你快速入门vue，欢迎童鞋们去三连哦。
一、Vue基础
1.第一个Vue程序
步骤：
-
引入vue开发环境
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -
编写所需要操作的dom树
<div id="app"> { {message}} </div> -
编写script脚本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue01</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{
{message}}
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
message:"你好 VUE!"
},
})
</script>
</body>
</html>
运行结果：
2.el挂载点
1) el是用来设置Vue实例挂载(管理)的元素
2) Vue实例的作用范围是什么呢?
Vue会管理el选项命中的元素及其内部的后代元素
3) 是否可以使用其他的选择器?
可以使用其他的选择器,但是建议使用ID选择器
4) 是否可以设置其他的dom元素呢?
可以使用其他的双标签,不能使用HTML和BODY
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue02</title>
</head>
<body id = "body">
<!-- 在指定的标签之外是不起作用的 -->
{
{message}}
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Vue会管理el选项命中的元素及其内部的后代元素 -->
<div id="app">
{
{message}}
<h2>
{
{message}}
</h2>
</div>
<script>
var vue = new Vue({
// el:"#app", //id选择器
// el:".app", //类选择器
// el: "div", // 标签选择器
el:"#body", // 不能使用HTML和BODY
data: {
message: "Hello VUE!"
},
})
</script>
</body>
</html>
如果使用第4)点中的html标签或者body标签作为el挂载点，浏览器会报错：
3.data数据对象：
1) Vue中用到的数据定义在data中
2) data中可以写复杂类型的数据
3) 渲染复杂类型数据时,遵守js的语法即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue01</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
{
{message}}
<!-- 在data数据对象中存放user对象 -->
<h2>
{
{user.name}} {
{user.age}}
</h2>
<!-- 在data数据对象中存放数组 -->
<ul>
<li>{
{campus[0]}}</li>
<li>{
{campus[1]}}</li>
<li>{
{campus[2]}}</li>
<li>{
{campus[3]}}</li>
</ul>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
message: "你好 VUE!", //数据为简单的字符串
user: {
// 数据为对象
name: "陈泽楠",
age: "23"
},
campus:["北京","上海","广州","深圳"] // 数据为数组
},
})
</script>
</body>
</html>
运行结果：
二、本地应用
1.v-text指令：
（1）v-text指令的作用是:设置标签的内容(textContent)
（2）默认写法会替换全部内容,使用差值表达式{
{}}可以替换指定内容
（3）内部支持写表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue01</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id = "app">
<!-- 下面三种写法是等价的 -->
<h2 v-text="message+'No.1'"></h2>
<h2>{
{message}}No.1</h2>
<h2>{
{message+'No.1'}}</h2>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
message:"中国"
}
})
</script>
</body>
</html>
运行结果：
2.v-html指令：
(1)v-html指令的作用是:设置元素的innerHTML
(2)内容中有html结构会被解析为标签
(3)v-text指令无论内容是什么,只会解析为文本
(4)解析文本使用v-text,需要解析html结构使用v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue01</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id = "app">
<p v-html="message"></p>
<p v-text="message"></p>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
// 特点是可以解析出字符串中的标签，其余的和v-text一样
message:"<a href='http://www.wust.edu.cn/'>武汉科技大学</a>"
}
})
</script>
</body>
</html>
运行结果：
3.v-on指令：
（1）v-on指令的作用是:为元素绑定事件
（2）事件名不需要写on
（3）指令可以简写为@
（4）绑定的方法定义在methods属性中
（5）方法内部通过this关键字可以访问定义在data中数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue01</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt"></input>
<input type="button" value="v-on简写" @click="doIt"></input>
<input type="button" value="v-on双击" v-on:dblclick="doIt"></input>
<h2>{
{food}}</h2>
<input type="button" value="单击修改食物" v-on:click="changeFood"></input>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
food: "西红柿炒鸡蛋"
},
methods: {
doIt: function() {
alert("做IT");
},
changeFood: function() {
if (this.food == '蛋炒饭') {
this.food='西红柿炒鸡蛋';
}else{
this.food='蛋炒饭'
}
},
}
})
</script>
</body>
</html>
运行结果：
4.v-show指令：
（1）v-show指令的作用是:根据真假切换元素的显示状态
（2）原理是修改元素的display样式,实现显示隐藏
（3）指令后面的内容,最终都会解析为布尔值
（4）值为true元素显示,值为false元素隐藏
（5）数据改变之后，对应元素的显示状态会同步更新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue01</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<img src="img/monkey.gif" v-show="isShow" /><br>
<input type="button" value="切换图片显示状态" @click="changeIsShow" />
<img src="img/monkey.gif" v-show="age>=18" /><br>
<input type="button" value= "增加年龄" @click="addAge" />
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
isShow: false,
age: 17
},
methods: {
changeIsShow: function() {
this.isShow = !this.isShow
},
addAge: function() {
this.age++;
}
}
})
</script>
</body>
</html>
运行结果：
- 点击之前
- 点击之后
5.v-if指令：
（1）v-if指令的作用是:根据表达式的真假切换元素的显示状态
（2）本质是通过操纵dom元素来切换显示状态
（3）表达式的值为true,元素存在于dom树中,为false,从dom树中移除
（4）频繁的切换v-show,反之使用v-if,前者的切换消耗小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue01</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<input type="button" value="切换显示" @click="changeIsShow" />
<p v-if="isShow">武汉科技大学</p><!-- v-if是改变dom树 -->
<p v-show="isShow">武汉科技大学</p><!-- v-show是改变display样式 -->
<input type="button" value="增加温度" @click="addTemperature" />
<p v-if="temperature<0">冷死了</p><!-- 可以使用表达式 -->
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
isShow: false,
temperature:-100
},
methods: {
changeIsShow: function() {
this.isShow = !this.isShow
},
addTemperature: function() {
this.temperature+=10;
}
}
})
</script>
</body>
</html>
运行结果：
- 点击之前：
- 点击之后
6.v-bind指令：
（1）v-bind指令的作用是:为元素绑定属性
（2）完整写法是v-bind:属性名
（3）简写的话可以直接省略v-bind,只保留:属性名
（4）需要动态的增删class建议使用对象的方式 :
active = {active:isActive},即isActive为true则active=active，否则active=''
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue01</title>
</head>
<style type="text/css">
.active {
border: 1px solid red;
}
</style>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<img v-bind:src="imgSrc" v-bind:title="imgTitle+'!!!'" v-bind:class="isActive?'active':''"
@click="changeActive" />
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
imgSrc: "img/monkey.gif",
imgTitle: "我是小猴子",
isActive: false
},
methods: {
changeActive: function() {
this.isActive = !this.isActive;
}
}
})
</script>
</body>
</html>
运行结果：
- 点击图片之前
- 点击图片之后
7.v-for指令：
（1）v-for指令的作用是:根据数据生成列表结构
（2）数组经常和v-for结合使用
（3）语法是( item,index) in数据
（4）item和index可以结合其他指令-起使用
（5）数组长度的更新会同步到页面上，是响应式的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for指令</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<input type="button" value="新增菜谱" @click="add" />
<input type="button" value="减少菜谱" @click="reduce" />
<ul>
<li v-for="(item,index) in arr">城市{
{index+1}}：{
{item}}</li>
</ul>
<h2 v-for="item in vegetables">{
{item}}</h2>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
arr: ["北京", "上海", "广州", "深圳"],
vegetables: ["蛋炒饭", "西红柿炒蛋", "水煮大白菜", "红烧牛肉"]
},
methods: {
add:function(){
this.vegetables.push("肉末茄子")
},
reduce:function(){
this.vegetables.shift();/* 移除数组左边的一个元素 */
}
}
})
</script>
</body>
</html>
运行结果
- 点击之前
- 点击之后
8.v-on指令补充：
（1）事件绑定的方法写成函数调用的形式，可以传入自定义参数
（2）定义方法时需要定义形参来接收传入的实参
（3）事件的后面跟上.修饰符可以对事件进行限制
（4）.enter可以限制触发的按键为回车
（5）事件修饰符有多种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for指令</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<input type="button" value="点击" @click="show(123,'你好')" /><br>
<input type="text" v-model="text" @keyup.enter="sayHi" />
</div>
<script>
var vue = new Vue({
el: "#app",
methods: {
show: function(p1, p2) {
/* console.log("hello"); */
alert(p1)
alert(p2)
},
sayHi: function() {
alert("吃了吗")
}
}
})
</script>
</body>
</html>
运行结果：
- 点击之前
- 点击之后
9.v-model指令：
（1）v-model指令的作用是便捷的设置和获取表单元素的值
（2）绑定的数据会和表单元素值相关联
（3）绑定的数据等于表单元素的值（双向绑定，同步更新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for指令</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<input type="button" value="获取数据" @click="getMsg" />
<input type="button" value="重置数据" @click="setMsg" />
<input type="text" v-model="message" />
<h2>{
{message}}</h2>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
message: "武汉科技大学"
},
methods: {
getMsg: function() {
alert(this.message)
},
setMsg:function(){
this.message="青山校区"
}
}
})
</script>
</body>
</html>
运行结果：
- 点击之前
- 点击之后
三、网络应用
1.axios ：
功能强大的网络请求库
1）引入：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2）两种请求方式：
- axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
- axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})
3）基本使用：
（1）axios必须先导，入才可以使用.
（2）使用get或post方法即可发送对应的请求
（3）then方法中的回调函数会在请求成功或失败时触发
（4）通过回调函数的形参可以获取响应内容，或错误信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>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 type="text/javascript">
/*
接口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)
alert(response.data.jokes[0])
alert(response.data.jokes[1])
alert(response.data.jokes[2])
}, 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:"czn"}).then(function(response){
console.log(response.data);
alert(response.data)
},function(err){
console.log(err)
})
}
</script>
</body>
</html>
运行结果：
- 点击之前
- 点击之后
2.axios+Vue：
（1）axios回调函数中的this已经改变无法访问到data中数据
（2）把this保存起来,回调函数中直接使用保存的this即可
（3）和本地应用的最大区别就是改变了数据来源
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>axios的基本使用</title>
</head>
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke(num)" />
<input type="text" v-model="num"/>
<p v-for="(item,index) in list">第{
{index+1}}条笑话:{
{item}}</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 type="text/javascript">
var vue = new Vue({
el: "#app",
data: {
list:[],
num:0
},
methods: {
getJoke: function(num) {
var that = this;
axios.get("https://autumnfish.cn/api/joke/list?num="+num).then(function(response) {
/* alert(response.data.jokes[0]) */
that.list=response.data.jokes;
}, function(err) {
alert(err.data)
})
},
}
})
</script>
</body>
</html>
运行结果：
- 点击之前
- 点击之后
四、5个小案例
1.案例1——计数器
描述：初始数值为0，点击“+”号数值增大1，点击“-”号数值减小1，当数值等于10再增大时会弹出提示信息不能再增大了，当数值等于0时再减小会弹出提示信息不能再减小。
1）代码：
<!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>
<!-- html结构 -->
<div id="app">
<!-- 计数器功能区域 -->
<div class="input-num">
<button v-on:click="sub">
-
</button>
<span>{
{num}}</span>
<button @click="add" >
+
</button>
</div>
<img src="http://www.itheima.com/images/logo.png" alt="" />
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 编码 -->
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data:{
num:1
},
methods:{
sub:function(){
if(this.num>0){
this.num--;
}else{
alert("不能再减了，已经是最小值了~")
}
},
add:function(){
if(this.num<10){
this.num++;
}else{
alert("不能再加了，已经是最大值了~")
}
}
}
})
</script>
</body>
</html>
2）运行结果：
- 初始状态
- 最小状态
- 最大状态
2.案例2——图片切换
描述：准备一系列的图片，点击“<”则图片向左翻页，点击“>”则图片向右翻页，如果目前是第一页，则“<”会隐藏，如果当前页是最后一页，则“>”会隐藏。
1）代码：
<!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.png" alt="">
深圳创维校区环境
</h2>
<!-- 图片 -->
<img :src="imgArr[index]" alt="图片" />
<!-- 左箭头 -->
<a href="javascript:void(0)" @click="prev" class="left" v-show="index!=0">
<img src="./images/prev.png" alt="上一页" />
</a>
<!-- 右箭头 -->
<a href="javascript:void(0)" @click="next" class="right" v-if="index<imgArr.length-1">
<img src="./images/next.png" alt="下一页" />
</a>
</div>
</div>
<!-- 引入需要在最前面 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vue = new Vue({
el: "#mask",
data: {
imgArr: [
"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>
2）运行结果：
- 第一页
- 最后一页
3.案例3——小黑记事本
描述：在输入框中输入事件，按回车键，可以将事件添加到记事本中。每个事件的后面都有一个“×”，点击“×”就可以将该事件从记事本中删除，记事本的左下角显示当前所有事件的条数，右下角有“clear”按钮，单击可以删除所有的事件。
1）代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>小黑记事本</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>小黑记事本</h1>
<input autofocus="autofocus" v-model="text" @keyup.enter="add" autocomplete="off" 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="destroy" @click="del(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer" v-show="list.length!=0">
<span class="todo-count" v-show="list.length!=0"> <strong>{
{this.list.length}}</strong> items left </span>
<button class="clear-completed" @click="clear" v-if="list.length!=0">
Clear
</button>
</footer>
</section>
<!-- 底部 -->
<footer class="info">
<p>
<a href="http://www.itheima.com/"><img src="./img/black.png" alt="" /></a>
</p>
</footer>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var vue = new Vue({
el: "#todoapp",
data: {
list: ["打游戏", "学习", "打篮球", "玩手机"],
text: ""
},
methods: {
add: function() {
this.list.push(this.text);
this.text = "";
},
del: function(index) {
this.list.splice(index, 1);
},
clear: function() {
this.list.splice(0, this.list.length);
},
}
})
</script>
</body>
</html>
2）运行结果：
- 新增
- 删除一个事件
- 全部清空
4.案例4——天知道
描述：在输入框中输入要查询的地方的名字，按键盘的回车键或者鼠标点击“搜索”按钮，可以查询出该城市最近5天的天气情况。在输入框的下方有一些常用的大城市的名称，用户直接点击即可快速查询出该城市的天气预报。
1）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>天知道</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="img/logo.png" alt="logo" /></div>
<div class="form_group">
<input type="text" class="input_txt" placeholder="请输入查询的天气" v-model="city" @keyup.enter="searchWeather" />
<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>
<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 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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 自己的js -->
<script src="./js/main.js"></script>
</body>
</html>
2）js代码：
/*
请求地址:http://wthrcdn.etouch.cn/weather_mini
请求方法:get
请求参数:city(城市名)
响应内容:天气信息
1. 点击回车
2. 查询数据
3. 渲染数据
*/
var vue = 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(function(response) {
/* console.log(response.data.data.forecast); */
that.weatherList = response.data.data.forecast;
}, function(err) {
})
console.log(this.weatherList)
},
changeCity: function(city) {
this.city = city;
this.searchWeather();
}
}
})
3）运行结果：
- 查询之前
- 搜索查询
- 点击查询
5.案例5——悦听播放器
描述：一个简单的播放器，在输入框中输入信息可以查询出相关的歌曲，点击歌曲信息上左边的“▶”按钮即可播放歌曲，如果歌曲有相关的mv，点击歌曲右边的“▶”按钮可以播放歌曲的mv，在歌曲播放的时候中间的歌曲封面会跟着进行转动，界面的右边是歌曲的热门评论，主要内容有评论者的昵称、头像、评论的内容。
1) 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">
</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">
<i @click="playMV(item.mvid)"></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 hotComment">
<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' :src="musicUrl" controls autoplay loop class="myaudio" @play="continueMusic()" @pause="pauseMusic()"></audio>
</div>
<!-- MV播放状态栏 -->
<div class="video_con" style="display: none;" v-show="isShow">
<video controls="controls" :src="MVUrl"></video>
<div class="mask" @click="close()"></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>
<!-- 引入自己的js -->
<script src="./js/main.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
2）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 vue = new Vue({
el: "#player",
data: {
// 搜索框的关键字
query: "",
// 搜索到的所有歌曲
musicList: [],
// 歌曲地址
musicUrl: "",
// 歌曲封面
musicCover: "",
// 热门评论
hotComment: [],
// 播放状态
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;
}, function(err) {
});
/* console.log(this.musicList) */
},
// 播放音乐
playMusic: function(id) {
this.id = id;
/* console.log(id) */
var that = this;
/* 获取音乐地址 */
axios.get("https://autumnfish.cn/song/url?id=" + this.id)
.then(function(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=" + this.id)
.then(function(response) {
that.musicCover = response.data.songs[0].al.picUrl
}, function(err) {
})
/* 获取歌曲评论 */
axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + this.id)
.then(function(response) {
/* console.log(response); */
that.hotComment = response.data.hotComments;
}, function(err) {
})
},
// 继续播放音乐
continueMusic: function() {
/* console.log("play"); */
this.isPlaying = true;
},
// 暂停播放音乐
pauseMusic: 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) */
that.MVUrl = response.data.data.url;
that.isShow = true;
}, function(err) {
})
},
// 关闭遮罩层
close: function() {
this.isShow = false;
this.MVUrl="";
}
}
})
3）运行结果：
- 初始界面
- 搜索结果
- 歌曲播放界面
- mv播放界面
注：所有源码在这
百度网盘提取码：lpj2