看视频跟着做了一个简单的天气预报数据渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue_axios显示天气预报</title>
<!-- 点击按钮随机获取笑话 -->
</head>
<body>
<div id="app">
<input type="text" v-model="city" name="" @keyup.enter="serchWeather()" class="input_txt" placeholder="请输入查询的天气" id="" value="" />
<button type="button" class="input_sub">搜索</button>
<div id="" 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>
</div>
<ul class="weather_list">
<li v-for="item in weatherList">
{{item.data}}
{{item.high}}
{{item.fengli}}
{{item.low}}
{{item.fengxiang}}
{{item.type}}
</li>
</ul>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="main.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
1.2js文件代码
// 请求地址:http://wthrcdn.etouch.cn/weather_mini
// 请求方法:get,
// 请求参数:city(城市名)
// 响应内容:天气信息,
// 1.点击回车
// 2.查询数据
// 3.渲染数据
var app = new Vue({
el: '#app',
data: {
city: '',
weatherList: [],
},
methods: {
serchWeather: function() {
// console.log('天气查询');
// console.log(this.city)
// 调用接口
//保存this
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
}).catch(function(err) {})
},
changeCity: function(city) {
//1.改城市
//2.查天气
this.city=city;
this.serchWeather();
}
}
})