这是一个最简单Vue.js实现天气预报的单页面界面,前端只用到了Vue.js和axios两个框架,效果如下图,声明这仅为个人的学习记录。
Html为骨架,Css为样式,Jscript控制行为
1.在html页面中引入axios和vue.js的框架,这里用到的开发环境版本。
<!--官网提供的axios在线地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.在body内搭建完html网页的主体部分
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="https://www.qixiangwang.cn/skins/Blue2012/images/index_02.jpg" alt='logo'></div>
<div class='form-group'>
<input type='text' class="input_txt" @keyup.enter='searchWeather' v-model='city' placeholder="请输入查询的天气">
<button class="input_sub" @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="type">{{item.type}}</div>
<div class="handl">{{item.high}}~{{item.low}}</div>
<span>{{item.date}}</span>
<!-- <span>{{item}}</span> -->
</li>
<!-- <li></li>
<li></li>
<li></li>
<li></li> -->
</ul>
</div>
3.在style标签中调整网页的结构样式
.wrap{
width: 800px;
height: 500px;
/* background-color: rgb(240, 219, 216); */
margin: 100px auto;
text-align: center;
position: relative;
border: 1px solid black;
}
.wrap .form-group{
margin-top: 30px;
width: 800px;
height: 50px;
/* background-color: rgb(198, 243, 243); */
position: relative;
}
.wrap .form-group .input_txt{
width: 500px;
height: 30px;
outline: none;
margin-right: 0px;
position: absolute;
left: 100px;
border: 2px solid rgb(169, 169, 240);
}
.wrap .form-group .input_sub{
width: 100px;
height: 36px;
border: none;
outline: none;
position: absolute;
right: 92px;
background-color:rgb(169, 169, 240) ;
color: white;
font-size: 16px;
}
.hotkey{
position: absolute;
left: 100px;
}
.hotkey a{
margin-right: 10px;
text-decoration: none;
color: gray;
font-size: 14px;
}
.weather_list{
padding-left: 0px;
margin-top: 60px;
display: flex;
width: 800px;
height: 180px;
/* background-color: rgb(217, 243, 217); */
list-style: none;
}
.weather_list li{
width: 160px;
border-right: 1px solid black;
}
.weather_list li:last-child{
border-right:none
}
.weather_list .type{
font-size: 40px;
color: rgb(245, 37, 37);
}
.weather_list .handl{
margin-top: 20px;
margin-bottom: 20px;
font-size: 12px;
color: rgb(245, 37, 37);
}
.weather_list span{
font-size: 12px;
color: gray;
}
4.在script标签中,请求数据,并对监听的回车和点击事件做出反应。这里要注意一下,如果Jscript代码在body标签上面的话,一定要加上window.onload。(原因是因为javaScipt代码在上面的时候,往往body中它要操作的对象还没有加载完成,会导致无法获取操作对象报错)
window.onload = function () {
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){
})
},
changeCity:function(city){
this.city=city;
this.searchWeather();
}
}
})
}