效果预览：http://songothao.gitee.io/weather_query_based_on_vuejs/
项目已上传码云：叁贰壹/vuejs实现天气查询
知乎视频www.zhihu.com一、使用 axios + vue.js:
axios-get请求：
axios.get(地址?key=value&key2=value2).then(function(response){}
).catch( function(err){}
);
2. axios-post 请求：
axios.post(地址, {key:value, key2:value2}).then(function(response){}
).catch( function(err){}
);
3. 引入 axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 二、天气的接口 http://wthrcdn.etouch.cn/weather_mini
三、代码实现
main.js
var app = new Vue({el: "#app",data: {city: '',forecast: []},methods: {search: function() {var that = this;axios.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`).then((res) => {that.forecast = res.data.data.forecast;}).catch((err) => {console.log(err);})},changeCity: function(city) {this.city = city;this.search();}}
})
index.html
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>查询天气</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/index.css"><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head><body><div class="wrap" id="app"><header class="header"><h1>小朋友查天气</h1></header><section class="main"><section class="search"><input type="text" placeholder="请输入查询的城市" v-model='city' @keyup.enter='search'><span class="btn" @click="search">搜索</span></section><section class="common-use"><a href="javascript:;" @click="changeCity('北京')">北京</a><a href="javascript:;" @click="changeCity('上海')">上海</a><a href="javascript:;" @click="changeCity('广州')">广州</a><a href="javascript:;" @click="changeCity('深圳')">深圳</a></section><section class="weather"><ul><li v-for='item in forecast'><div><h1>{{item.type}}</h1><p>{{item.low}} ~ {{item.high}}</p><p>{{item.date}}</p></div></li></ul></section></section></div><script src="./js/main.js"></script>
</body></html>
CSDN：https://blog.csdn.net/weixin_43148062
简书：https://www.jianshu.com/u/45339cbb7573
