這次把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(); } } })
效果長這樣（雖然有點丑）：
