效果图展示：
首先我们得知道自己所在城市的天气编码，查看自己所在城市的天气编码详情网址查询：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类型网址：https://www.bootcdn.cn/axios/
有4个axiosCDN引入网址，第一个和第二个后缀是amd网址不要选，第三个和第四个可以用，第三个额是完整的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()方法发送API请求，获取数据
axios.get('http://wthrcdn.etouch.cn/weather_mini?citykey=101280601')
.then( (res) => {
console.log(res.data);
//把获取到的数据给到list数组里面进行遍历
this.list = res.data.forecast;
console.log(this.list)
})
//是否发送错误请求
.catch( (err) => {
console.log(err);
});
}
},
})
</script>
</body>
</html>
标注
v-model.trim="city" 用于去掉输入框内首尾空格
@keyup.enter="onEnter" 绑定键盘按下回车事件
axios.get()请求过程详细代码(不过一般都建议使用用箭头函数简写，提高效率)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
response返回的是.json格式的数据，而我们要取的数据一般都会存储在data里面，我们想了解data对象里面的每一层数据只需要用用.号打开就行，像这样
console.log(response.data.forecast);//我们就找到了有关天气未来5天的详情。
其他之于post和get方式请求详情网址：http://www.axios-js.com/zh-cn/docs/
网友评论