用Vue制作天气预报
先放个效果图吧首先理清思路,查询天气大致分为三步①输入城市,按下回车②调用接口查询数据③接收数据第一步可以用v-on来完成,第二步可以用v-model和axios来完成,第三步可以用v-for来完成。然后写下html的大致结构<div id="app" class="wrap"><div class="search_form"><div class="logo">
先放个效果图吧
首先理清思路,查询天气大致分为三步
①输入城市,按下回车
②调用接口查询数据
③接收数据
第一步可以用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;
}
更多推荐
所有评论(0)