先放个效果图吧

首先理清思路，查询天气大致分为三步

①输入城市，按下回车
②调用接口查询数据
③接收数据

第一步可以用v-on来完成，第二步可以用v-model和axios来完成，第三步可以用v-for来完成。

然后写下html的大致结构

<div id="app" class="wrap">
	<div class="search_form">
		<div class="logo">
			<img src="/img/天气预报.png" alt="天气预报">
		</div>
		<div class="txt">
			<input type="text" class="input_txt" placeholder="请输入查询的城市">
			<button class="input_sub">搜 索</button>
		</div>
		<div class="hotkey">
			<a href="javascript:;">北京</a>
			<a href="javascript:;">上海</a>
			<a href="javascript:;">广州</a>
			<a href="javascript:;">深圳</a>
		</div>
	</div>
	<ul class="weather_list">
		<li>
			<div class="info_type">

			</div>
			<div class="info_temp">

			</div>
			<div class="info_date">

			</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>

主要分为两块，一部分是由图片和搜索框组成的div，一部分是由天气信息组成的ul。

由于v-on需要绑定一个函数，因此先写js部分

var app = new Vue({
    el: "#app",
    data: {
        city: "",
    },
    methods: {
        searchWeather: function () {
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city).then(function (response) {
                console.log(response);
            }, function (err) {})
        }
    }
})

该天气接口的请求参数为city，因此给data中传入一个city，然后在searchWeather函数中先打印一下看看response是什么，结果如下

可以看到天气的信息被储存在data中的data中的forecast部分，所以将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;
            }, function (err) {})
        }
    }
})

由于v-for需要接收一个数组，所以此处在data中添加一个weatherList的空数组，并在searchWeather函数中给它赋值天气信息。由于axios回调函数中的this已经改变，无法访问到data中的数据，所以要先把this保存起来用that表示，然后在函数中使用that即可访问weatherList。

然后来修改html文件，首先是给搜索框搭配一个v-on以及v-model，绑定好searchWeather函数

<input type="text" class="input_txt" @keyup.enter="searchWeather" v-model="city" placeholder="请输入查询的城市">
<button class="input_sub" @click="searchWeather">搜 索</button>

然后在li中书写v-for，接收保存好天气信息的weatherList数组

<ul class="weather_list">
	<li v-for="item in weatherList">
		<div class="info_type">
			{{item.type}}
		</div>
		<div class="info_temp">
			<b>{{item.low}}</b>
			~
			<b>{{item.high}}</b>
		</div>
		<div class="info_date">
			{{item.date}}
		</div>
	</li>
</ul>

由于想要获取的天气信息有天气类型，温度以及日期，而从刚刚打印出来的response那张图里可以看到，天气类型对应着type，温度对应着low和high，日期对应着date，所以直接写出来就可以了。

至此，在搜索框中输入城市就已经可以得到该城市的天气预报了，不过在搜索框下面还有一排热门城市北上广深，是为了更便捷地看到这几个城市的天气信息而不用打字来搜索。

而要完成这个功能其实就相当于在点击该城市之后，搜索框中的v-model绑定的city发生了变化，所以写个自定义参数就可以了，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;
            }, function (err) {})
        },
        changeCity: function (city) {
            this.city = city;
            this.searchWeather();
        }
    }
})

添加一个changeCity函数，并传入形参city，这个函数就分为两步，改城市以及查天气，由于methods中定义的方法内部，可以通过this关键字获取以及点出其他的函数。然后html程序如下

<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>

最后就是css文件了，这里直接给出程序

.wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.search_form {
    width: 650px;
    margin: 20px auto 20px;
}

.logo img {
    display: block;
    margin: 0 auto;
}

.txt {
    margin: 30px auto;
}

.input_txt {
    width: 540px;
    height: 40px;
    border: 1px solid #41a1cb;
    text-indent: 10px;
}

.input_sub {
    width: 104px;
    height: 44px;
    float: right;
    font-size: 16px;
    background-color: #41a1cb;
    color: #fff;
    border: 0px;
    cursor: pointer;
}

.hotkey a {
    text-decoration: none;
    color: #666;
    padding-right: 15px;
}

.weather_list {
    height: 200px;
    text-align: center;
}

.weather_list li {
    display: inline-block;
    width: 140px;
    height: 200px;
    padding: 0 10px;
    overflow: hidden;
    position: relative;
    background: url(./img/line.png) right center no-repeat;
    background-size: 1px 130px;
}


.info_type {
    color: #fda252;
    font-size: 30px;
    line-height: 80px;
}

.info_temp {
    color: #fda252;
    font-size: 14px;
}

.info_date {
    height: 40px;
    line-height: 40px;
    color: #999;

}