Vue实现天气预报小应用 Vue实现天气预报小应用

这是本人在自学vue框架时候所模仿的一个网站，可以查询一些城市的天气情况，大家可以看看：
html代码

焕鑫知道 - 锐客网查天气
{{ city }}
{{ item.type }}{{ item.low}}~{{ item.high}}{{ item.date }}

【Vue实现天气预报小应用】js的代码

/*请求地址:http://wthrcdn.etouch.cn/weather_mini请求方法:get请求参数:city(城市名)响应内容:天气信息1. 点击回车2. 查询数据3. 渲染数据*/ var app = new Vue({el:"#app",data:{city:'',weatherList:[]},methods: {searchWeather:function(){//console.log('天气查询'); //console.log(this.city); // 调用接口// 保存thisvar 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){})}}, })

首页的css文件

body{font-family:'Microsoft YaHei'; }.wrap{position: fixed; left:0; top:0; width:100%; height:100%; /* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); *//* background:#8fd5f4; *//* background: linear-gradient(#6bc6ee, #fff); */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:0px; 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; }/* .weather_list .col02{background-color: rgba(65, 165, 158, 0.8); }.weather_list .col03{background-color: rgba(94, 194, 237, 0.8); }.weather_list .col04{background-color: rgba(69, 137, 176, 0.8); }.weather_list .col05{background-color: rgba(118, 113, 223, 0.8); } */.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; }

reset的css文件

body,ul,h1,h2,h3,h4,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; }/* 清除浮动，解决margin-top塌陷 */.clearfix:before,.clearfix:after{content:''; display:table; }.clearfix:after{clear:both; }.clearfix{zoom:1; }.fl{float:left; }.fr{float:right; }

测试结果