利用axios网络数据实现查询天气功能，具体思路如下：
（1）利用v-on.enter实现按下回车；
（2）然后利用axios接口和v-model查询数据；
（3）v-for数组实现数据渲染；
??????这里参数为city，接口地址为：http://wthrcdn.etouch.cn/weather.min;? 用get获取数据。
实现效果如下：
?
代码如下：
css部分：
body{
font-family: "Microsoft YaHei";
}
.wrap{
position: fixed;
left:0;
top:0;
width: 100%;
height: 100%;
background: #fff;
}
.search_form{
width: 640px;
margin: 100px auto 0;
}
.logo img{
display: block;
margin: 0 auto;
}
.form_group{
width: 640px;
height: 40px;
margin-top: 45px;
}
.input_txt{
width: 538px;
height: 38px;
padding: 0;
float: left;
border: 1px solid #41a1cb;
outline: none;
text-indent: 10px;
}
.input_sub{
width:100px;
height:40px;
border:0px;
float: left;
background-color: #41a1cb;
color:#fff;
font-size:16px;
outline:none;
cursor: pointer;
position: relative;
}
.input_sub.loading::before{
content:'';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('../img/loading.gif');
}
.hotkey{
margin:3px 0 0 2px;
}
.hotkey a{
font-size:14px;
color:#666;
padding-right:15px;
}
.weather_list{
height:200px;
text-align:center;
margin-top:50px;
font-size:0px;
}
.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;
}
.weather_list li:last-child{
background:none;
}
.info_date{
width:100%;
height:40px;
line-height:40px;
color:#999;
font-size:14px;
left:0px;
bottom:0px;
margin-top: 15px;
}
.info_date b{
float: left;
margin-left:15px;
}
.info_type span{
color:#fda252;
font-size:30px;
line-height:80px;
}
.info_temp{
font-size:14px;
color:#fda252;
}
.info_temp b{
font-size:13px;
}
.tem .iconfont {
font-size: 50px;
}
body,ul,h1,h2,h3,h3,h5,h6{
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6{
font-size: 100%;
font-weight: normal;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
img{
border:0px;
}
.clearfix:before,.clearfix:after{
content:"";
display: table;
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom: 1;
}
.fl{
float: left;
}
.fr{
float: right;
}
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="weather_index.css" />
<link rel="stylesheet" href="reather_reset.css" />
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="form_group">
<input type="text" v-model="city" @keyup.enter="searchWeather" 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 v-for="item in weatherList">
<div class="info_type"><span class="iconfont">{{ 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部分:这里this需保存起来，回调函数中直接使用保存的this就可以（axios回调函数中的this会改变）
var app = new Vue({
el:"#app",
data:{
city:'',
weatherList:[]
},
methods: {
searchWeather: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);
console.log(response.data.data.forecast);
that.weatherList = response.data.data.forecast
})
.catch(function(err){})
}
},
})