本文是我心血來潮學習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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/263471.html
標籤：其他