vue+axios天气查询——天知道效果展示及源码分析

使用vue制作城市的天气查询

<!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>Document</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><link rel="stylesheet" href="./index.css"><script src="./index.js"></script>
</head><body><!-- 天气查询回车查询1按下回车v-on.enter2查询数据axios接口v-model3渲染数据v-for that点击查询 1点击城市v-on自定义参数2查询数据 this.()方法3渲染数据--><div id="app"><div class="search_form"><div class="logo"><img src="img/logo.png" alt="logo" /></div><div class="form_group"><input type="text" class="input_txt" placeholder="请输入查询的天气" v-model="city" @keyup.enter="searchWeather" /><button class="input_sub" @click="searchWeather">搜 索</button></div><div class="hotkey"><a href="javascript:;" v-for="city in hotCitys" @click="changeCity(city)">{{ city }}</a></div></div><ul class="weather_list"><li v-for="(item,index) in weatherList" :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></body></html>

window.onload = function() {var app = new Vue({el: '#app',data: {city: '',hotCitys: ['北京', '上海', '广州', '深圳'],weatherList: []},methods: {searchWeather() {// console.log(this.city);var that = thisaxios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city).then(function(res) {// console.log(res.data.data.forecast);that.weatherList = res.data.data.forecast}).catch(function(err) {console.log(err);})},changeCity(city) {this.city = citythis.searchWeather()}}})
}

body {font-family: 'Microsoft YaHei';
}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;
}.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;
}

图片部分可以网上自己找，也可以删了关于图片的code

vue+axios天气查询——天知道效果展示及源码分析相关推荐

基于vue和vuex的todos效果展示及源码分享
todos,待做项目经常被以各种方式来实现,js,node, 这里分享一个基于vue和vuex的todos 主要有三部分代码main.js,index.js,App.vue import Vue fr ...
LinkedList中查询(contains)和删除(remove)源码分析
一.contains源码分析本文分析双向链表LinkedList的查询操作源码实现.jdk中源程序中,LinkedList的查询操作,通过contains(Object o)函数实现.具体见下面两部 ...
花费一天时间基于Vue创建的epub小说阅读器效果展示及源码分享
视频演示 https://www.bilibili.com/video/BV11X4y1M716 链接: link. github源码地址:https://github.com/lyh-create/ ...
基于vue+echarts 数据可视化大屏展示[附源码]
获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您 ...
Laravel Database——查询构造器与语法编译器源码分析 (上)
前言在前两个文章中,我们分析了数据库的连接启动与数据库底层 CRUD 的原理,底层数据库服务支持原生 sql 的运行.本文以 mysql 为例,向大家讲述支持 Fluent 的查询构造器 query ...
基于Vue的记事本todos效果展示及源码分享
前些天做了个使用vuex制作的记事本todos,这次使用vue做一个todos记事本 show code <!DOCTYPE html> <html lang="en&qu ...
vue实现消息badge 标记_Badge组件_element-ui源码分析笔记 - SegmentFault 思否
Badge组件主要用于数字或状态的标记,对于消息类的提醒功能,使用这组件还是很常见的.具体显示效果如下图: 不管组件复杂还是简单,编码实现这个组件的都不是源码分析目的. 源码分析,在于通过一步步的实现 ...
视频教程-经典Vue从入门到案例到源码分析教程（含资料）-Vue
经典Vue从入门到案例到源码分析教程(含资料) 张长志技术全才.擅长领域:区块链.大数据.Java等.10余年软件研发及企业培训经验,曾为多家大型企业提供企业内训如中石化,中国联通,中国移动等知名企业 ...
用Canvas画布展示出3D效果的网页源码
大家好,今天给大家介绍一款,用Canvas画布展示出3D效果的网页源码(图1).送给大家哦,获取方式在本文末尾. 图1 每次点击页面中间的卡片,就会触发3d旋转特效(图2) 图2 源码预览, < ...

vue+axios天气查询——天知道效果展示及源码分析

vue+axios天气查询——天知道效果展示及源码分析相关推荐

最新文章

热门文章