这是本人在自学vue框架时候所模仿的一个网站,可以查询一些城市的天气情况,大家可以看看:
html代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <!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 > <!-- 开发环境版本,包含了有帮助的命令行警告 --> <!-- 官网提供的 axios 在线地址 --> < 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的代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | /* 请求方法: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 ; .then( function (response){ // console.log(response); console.log(response.data.data.forecast); that.weatherList = response.data.data.forecast }) . catch ( function (err){}) } }, }) |
首页的css文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | 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文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | body,ul,h 1 ,h 2 ,h 3 ,h 4 ,h 5 ,h 6 { margin : 0 ; padding : 0 ; } h 1 ,h 2 ,h 3 ,h 4 ,h 5 ,h 6 { 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 ; } |
测试结果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学编程网。
- 本文固定链接: https://zxbcw.cn/post/220931/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)