这次把axios和vue结合起来写个查询天气的东西。
我们希望在搜索框输入城市名字，就能显示对应的天气。并且搜索框下面有四个城市，也就是所谓的"hotkey".点击这四座城市中的任意一座，都能显示其近五天的天气情况。
首先我们要有一个搜索框，然后，我们希望的是在框里输入城市名字后，按回车，其天气信息就会显示出来。怎么实现呢？@keyup.enter就可以了。除此之外，还要给这个东西绑定一个函数，这个函数需要向对应的请求地址请求数据，完了之后要返回数据。然后，服务器需要知道我要搜索的是哪座城市的天气，因此，我还需要在data里面给定一个城市的数据，为city.接着，我需要获取这个数据，怎么获取？接收用户输入，诶，这里我们就明朗了，既然是接收用户输入，自然要用到v-model指令。我们把city绑定给v-model就好了。
这个时候自然就是需要在keyup.enter绑定的搜索天气的函数中实现请求部分的代码。这里很简单，还是按照那个固定格式来就行了。唯一需要注意的地方或许就是请求地址后面跟的参数，不能全部写在那个请求地址的字符串中，而应该要在后面加一个this.city.另外，你会发现光打印response，会出来一大堆东西，然后我们按F12键一层一层地去挖掘我们真正需要的数据。最后你会发现是response.data.data.forecast.
我们把这个打印出来就OK。
不过光这样显然不太行，因为我们不仅仅希望把这串信息打印出来，还希望它能够在搜索框的下面显示。这也很简单，我们弄一个表单，并且用v-for指令循环生成逐个打印就可以了。这时，需要用到渲染，我们在数据中添加一个数组，刚开始自然是赋为空，而我们之前拿到的response.data.data.forecast其实就是个数组，把这个在请求数据后立刻赋给定义好的空数组就行了。自然，请求数据时this.后面指代的内容也会改变，因此在请求之前我们需要把它保存起来。
然后，那些热键肯定不是摆在那好看的，我们希望用户点击那四座城市也能显示天气。怎么做呢？很简单，再写一个函数，然后找到那四座城市的html代码，绑定上去就好了。函数要怎么写呢？首先，我们需要一个参数，表示的是城市，再把它赋给this.city就行，最后，怎么做？诶，我不是已经写好了一个搜索的函数吗？直接调不就完事了？哈哈。
代码：
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>WeatherForecast</title> </head> <body> <div class="wrap" id="app"> <div class="search_form"> <div class="logo"> <img src="logo.png" alt="logo"> </div> <div class="form-group"> <input type="text" @keyup.enter="searchWeather" v-model="city" class="input_text" placeholder="请输入查询天气的城市"> <button class="input_submit" @click="searchWeather">查询</button> </div> <div 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> </div> <ul class="weather_list"> <li v-for="item in weatherList"> <div class="info_type"> <span class="icon-font">{{ item.type }}</span> </div> <div class="info_temp"> <b>{{ item.low }}</b>~<b>{{ item.high }}</b> </div> <div class="info_date"> <span>{{ item.date }}</span> </div> </li> </ul> </div> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="main.js"></script> </body> </html>
JS部分：
var app = new Vue({ el:"#app", data:{ city:" ", weatherList:[] }, methods:{ searchWeather:function () { var that = this; axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function (response) { that.weatherList = response.data.data.forecast; console.log(response.data.data.forecast); }, function (err) { console.log(err); }) }, changeCity:function (city) { this.city = city; this.searchWeather(); } } })
效果长这样（虽然有点丑）：
