看視頻跟着做了一個簡單的天氣預報數據渲染
<!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();
}
}
})
