效果圖展示：
首先我們得知道自己所在城市的天氣編碼，查看自己所在城市的天氣編碼詳情網(wǎng)址查詢：https://blog.csdn.net/ck784101777/article/details/103383890?utm_medium=distribute.pc_relevant_download.none-task-blog-baidujs-1.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-baidujs-1.nonecase
城市天氣API接口：http://wthrcdn.etouch.cn/weather_mini?citykey=101280601（citykey等號后面的101280601是深圳所在地的天氣編碼）
citykey=輸入自己所在城市的編碼
vue官方提供的axios類型網(wǎng)址：https://www.bootcdn.cn/axios/
有4個axiosCDN引入網(wǎng)址，第一個和第二個后綴是amd網(wǎng)址不要選砸逊，第三個和第四個可以用，第三個額是完整的axios墓臭，第四個是min的。
引入vue提供CDN的axios（我這給大家備好了祟牲，直接拿去用）
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.js"></script>
建議大家在body開頭下一行就引入CDN奏寨，因為瀏覽器的機制是自上而下編譯的,放其他位置可能有坑
下面是完整代碼仑鸥，大家可以參考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
li {
list-style: none;
float: left;
padding: 20px;
}
ul li > div {
border:1px solid #e5e6
}
</style>
<body>
<!-- 引入vue提供CDN的axios -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.js"></script>
<div id="app">
<h2>天氣搜索--{{city}}</h2>
<input v-model.trim="city" @keyup.enter="onEnter" type="text" placeholder="請輸入你要查詢的城市天氣">
<ul>
<li v-for="item in list">
<div>日期：{{item.date}}</div>
<div>最高溫：{{item.high}}</div>
<div>最低溫：{{item.low}}</div>
<div>風力：{{item.fengli}}</div>
<div>風向：{{item.fengxiang}}</div>
<div>雨勢：{{item.type}}</div>
</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
city: "",
list: []
}
},
methods: {
onEnter() {
//axios.get()方法發(fā)送API請求吮播，獲取數(shù)據(jù)
axios.get('http://wthrcdn.etouch.cn/weather_mini?citykey=101280601')
.then( (res) => {
console.log(res.data);
//把獲取到的數(shù)據(jù)給到list數(shù)組里面進行遍歷
this.list = res.data.forecast;
console.log(this.list)
})
//是否發(fā)送錯誤請求
.catch( (err) => {
console.log(err);
});
}
},
})
</script>
</body>
</html>
標注
v-model.trim="city" 用于去掉輸入框內(nèi)首尾空格
@keyup.enter="onEnter" 綁定鍵盤按下回車事件
axios.get()請求過程詳細代碼(不過一般都建議使用用箭頭函數(shù)簡寫，提高效率)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
response返回的是.json格式的數(shù)據(jù)眼俊，而我們要取的數(shù)據(jù)一般都會存儲在data里面意狠，我們想了解data對象里面的每一層數(shù)據(jù)只需要用用.號打開就行，像這樣
console.log(response.data.forecast);//我們就找到了有關天氣未來5天的詳情疮胖。
其他之于post和get方式請求詳情網(wǎng)址：http://www.axios-js.com/zh-cn/docs/
