Vue實現天氣預報小應用
這是本人在自學vue框架時候所模仿的一個網站,可以查詢一些城市的天氣情況,大傢可以看看:
html代碼
<!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>煥鑫知道</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;">查天氣</p></div> <div class="form_group"> <input type="text" class="input_txt" placeholder="請輸入查詢的天氣" v-model="city" @keyup.enter="queryWeather" /> <button class="input_sub" @click="queryWeather"> 搜 索 </button> </div> <div class="hotkey"> <!-- <a href="javascript:;" @click="clickSearch('北京')">北京</a> <a href="javascript:;" @click="clickSearch('上海')">上海</a> <a href="javascript:;" @click="clickSearch('廣州')">廣州</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> <!-- 開發環境版本,包含瞭有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 官網提供的 axios 在線地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> new Vue({ el: "#app", data: { city: "武漢", forecastList: [], hotCitys: ["北京", "上海", "廣州", "深圳"] }, 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的代碼
/* 請求地址: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); // 調用接口 // 保存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){}) } }, })
首頁的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; }
測試結果
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。