【Vue自学笔记（四）】天气案例
请求地址:http://wthrcdn.etouch.cn/weather_mini
请求方法:get
请求参数:city (查询的城市名)
响应内容:天气信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的axios库在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<div>
<h2>天知道</h2>
<!-- search中的参数其实就是data中的同名参数的值 -->
<!-- 使用双向绑定实现回车查询和点击查询 -->
<input type="text" v-model="city" @keyup.enter="search(city)">
<!-- 如果搜索框中 -->
<button @click="search(city)">搜索</button>
</div>
<div>
<!-- 和视频不同使用的是一个list，点击事件调用的是一个带有参数的查询方法 -->
<a v-for="(item,index) in cityArr" @click="search(cityArr[index])">{{cityArr[index]}}</a>
</div>
<div>
<ul>
<li v-for="(item,index) in weatherArr">
日期：{{item.date}}<br>
最高温度：{{item.high}}
最低温度：{{item.low}}
风向：{{item.fengli}}
级数：{{item.gl}}
天气：{{item.type}}
</li>
</ul>
</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
cityArr: ["北京", "天津", "深圳", "广州"],
city: "",
weatherArr: [],
},
methods: {
search: function (a) {
var _this = this
axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + a)
.then(function (response) {
//打印response
console.log(response)
//将返回的参数赋值给weatherArr，注意层级
_this.weatherArr = response.data.data.forecast
})
.catch(function (err) { })
}
}
})
</script>
</html>
