Vue implements a small weather forecast application
|
This is a website I imitated when I was self-studying the vue framework. You can check the weather conditions of some cities. You can take a look: HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Huanxin knows</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><p style="color: red;text-align: center; font-size: 64px;">Check the weather</p></div>
<div class="form_group">
<input type="text" class="input_txt" placeholder="Please enter the weather you want to query" v-model="city" @keyup.enter="queryWeather" />
<button class="input_sub" @click="queryWeather">
Search</button>
</div>
<div class="hotkey">
<!-- <a href="javascript:;" @click="clickSearch('北京')">北京</a>
<a href="javascript:;" @click="clickSearch('上海')">上海</a>
<a href="javascript:;" @click="clickSearch('Guangzhou')">Guangzhou</a>
<a href="javascript:;" @click="clickSearch('深圳')">深圳</a> -->
<a href="javascript:;" v-for="city in hotCitys" @click="clickSearch(city)">{{ city }}</a>
</div>
</div>
<ul class="weather_list">
<li v-for="(item,index) in forecastList" :key="item.date" :style="{transitionDelay:index*100+'ms'}">
<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>
<!-- Development version, including helpful command line warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Axios online address provided by the official website-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
city: "Wuhan",
forecastList: [],
hotCitys: ["Beijing", "Shanghai", "Guangzhou", "Shenzhen"]
},
methods: {
queryWeather() {
this.forecastList = [];
axios
.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`)
.then(res => {
console.log(res);
this.forecastList = res.data.data.forecast;
})
.catch(err => {
console.log(err);
})
.finally(() => { });
},
clickSearch(city) {
this.city = city;
this.queryWeather();
}
}
});
</script>
</body>
</html>js code
/*
Request address: http://wthrcdn.etouch.cn/weather_mini
Request method: get
Request parameter: city (city name)
Response content: Weather information 1. Click Enter 2. Query data 3. Render data */
var app = new Vue({
el:"#app",
data:{
city:'',
weatherList:[]
},
methods: {
searchWeather:function(){
// console.log('Weather query');
// console.log(this.city);
//Call interface//Save 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){})
}
},
})Home page css file
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;
}
.temp .iconfont {
font-size: 50px;
}reset css file
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;
}
/* Clear floating to solve margin-top collapse*/
.clearfix:before,.clearfix:after{
content:'';
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;
}
.fl{
float:left;
}
.fr{
float:right;
}Test Results
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Detailed explanation of MySQL replication principles and practical applications
>>: The complete process of iptables rules in Docker being lost after iptables restart
Recommend
An experienced person will show you how to develop a professional and standardized MySQL startup script
Every qualified Linux operation and maintenance p...
How to use CSS3 to implement a queue animation similar to online live broadcast
A friend in the group asked a question before, th...
Tutorial on using the hyperlink tag in HTML
The various HTML documents of the website are con...
HTML+CSS to achieve the special effects code of the blood-sharingan and samsara eye
The result (full code at the bottom): The impleme...
How to automatically number the results of MYSQL query data
Preface In fact, I have never encountered this ki...
How to transfer files between Windows and Linux
File transfer between Windows and Linux (1) Use W...
Database backup in docker environment (postgresql, mysql) example code
Table of contents posgresql backup/restore mysql ...
Steps to use VMWare to build a Linux environment under Windows (picture and text)
Since I returned the Mac, my original laptop has ...
Detailed explanation of the conflict between flex layout and position:absolute/fixed
I encountered this problem before when developing...
Ubuntu 20.04 sets a static IP address (including different versions)
Because Ubuntu 20.04 manages the network through ...
How to view the execution time of SQL statements in MySQL
Table of contents 1. Initial SQL Preparation 2. M...
Summary of scientific principles and suggestions for web design and production
<br />In the field of network design, resear...
Detailed explanation of the case of Vue child component calling parent component method
1. Call the parent component method directly thro...
Issues with using Azure Container Registry to store images
Azure Container Registry is a managed, dedicated ...
How to use map to allow multiple domain names to cross domains in Nginx
Common Nginx configuration allows cross-domain se...