学习地址：https://www.bilibili.com/video/BV12J411m7MG?p=27
源码地址：https://gitee.com/sqc03/weather
- 效果展示：
搜索查询：
点击查询：
- HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网络应用-天气预报</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="wrap" id='app'>
<div class="search_form">
<div class="logo"><img src="img/sky.jpg" alt="skylogo"></div>
<div class="form_group">
<input type="text" @keyup.enter='searchWeather' v-model='city'
class='input_txt' placeholder='请输入要查询的城市'>
<button class='input_sub' @click='searchWeather'>搜索</button>
</div>
<div class="hotkey form_group">
<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="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>
<!-- 官方提供的axios在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 导入自己的js -->
<script src='js/main.js'></script>
</body>
</html>- CSS代码：
* {
margin: 0;
padding: 0;
}
.wrap {
width: 1000px;
margin: 50px auto 0;
}
.logo {
text-align: center;
margin-bottom: 10px;
}
.form_group {
width: 400px;
height: 35px;
margin-left: 50%;
transform: translateX(-50%);
}
input {
float: left;
outline: none;
width: 326px;
height: 100%;
border: 1px solid rgb(73, 178, 219);
padding-left: 2px;
}
.input_sub {
float: left;
height: 37px;
width: 70px;
background-color: skyblue;
border: 1px solid skyblue;
color: #fff;
}
.input_sub:hover {
background-color: rgb(96, 168, 235);
}
.hotkey {
margin-top: 5px;
}
a {
text-decoration: none;
color: grey;
font-size: 14px;
}
a:hover{
color: skyblue;
}
li {
list-style: none;
float: left;
width: 190px;
border-right: 1px solid grey;
}
.weather_list {
margin-top: 20px;
}
ul li:last-child{
border-right: none;
}
.info_type {
color: orange;
font-size: 20;
font-weight: 700;
text-align: center;
}
.info_temp {
color: orange;
font-size: 16px;
margin-top: 10px;
text-align: center;
}
.info_date {
text-align: center;
color: grey;
font-size: 16px;
margin-top: 10px;
}- JS代码：
/* 天气接口：
请求地址：http://wthrcdn.etouch.cn/weather_mini
请求方法：get
请求参数：city（查询的城市名）
响应内容：天气信息 */
var app = new Vue({
el:'#app',
data:{
city:'',
weatherList:[]
},
methods:{
searchWeather:function(){
// console.log('天气查询');
// console.log(this.city);
// 调用接口
var that = this;
axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
.then(function(response){
// console.log(response.data.data.forecast);
that.weatherList = response.data.data.forecast;
},function(err){
console.log(err);
})
},
changeCity:function(city){
this.city = city;
this.searchWeather();
}
}
})案例中的图片来源于网络，侵删。