文章目录
1、引言2、天知道概述3、模板展示4、回车键查询功能开发5、点击查询功能开发6、js完整代码及接口7、结束语 点击进入Vue❤学习专栏~1、引言
最近呢，也是在自学Vue中，通过边学边记录，算是一项成长记录篇把，本篇博客以简单天气查询网页进行开发，激发对前端开发的兴趣，过程中的一些样式就不展示了，只展示一部分核心代码。需要源码的话在文章末尾会提供本次项目源码，请多指教~
2、天知道概述
该网页名取名叫做“天知道”，是一个真实可以查询某个城市天气的网页。
天知道主要功能：
① 回车查询② 点击查询③ 能查询近5天的天气
天知道涉及知识：
①应用的逻辑代码和页面分离，使用单独的js文件编写
②使用箭头函数代替普通函数，解决this作用域问题
③服务器返回的数据比较复杂时，获取的时候需要注意层级结构
天知道完整版效果图展示：
3、模板展示
下面提供待开发的模板代码：
<!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"><img src="img/logo.png" alt="logo" /></div><div class="form_group"><inputtype="text"class="input_txt"placeholder="请输入查询的天气"/><button class="input_sub">搜 索</button></div><div class="hotkey"><a href="javascript:;">北京</a><a href="javascript:;">上海</a><a href="javascript:;">广州</a><a href="javascript:;">深圳</a></div></div><ul class="weather_list"><li><div class="info_type"><span class="iconfont">小雨</span></div><div class="info_temp"><b>低温 2℃</b>~<b>高温 19℃</b></div><div class="info_date"><span>24日星期天</span></div></li></ul></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="/npm/vue/dist/vue.js"></script><!-- 官网提供的 axios 在线地址 --><script src="/axios/dist/axios.min.js"></script><!-- 带入外部写的js --></body></html>
4、回车键查询功能开发
<!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"><img src="img/logo.png" alt="logo" /></div><div class="form_group"><inputtype="text"v-model="city" @keyup.enter="searchWeather()"class="input_txt"placeholder="请输入查询的天气"/><button class="input_sub">搜 索</button></div><div class="hotkey"><a href="javascript:;">北京</a><a href="javascript:;">上海</a><a href="javascript:;">广州</a><a href="javascript:;">深圳</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><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="/npm/vue/dist/vue.js"></script><!-- 官网提供的 axios 在线地址 --><script src="/axios/dist/axios.min.js"></script><!-- 带入外部写的js --><script src="./js/main.js"></script></body></html>
5、点击查询功能开发
<!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"><img src="img/logo.png" alt="logo" /></div><div class="form_group"><inputtype="text"v-model="city" @keyup.enter="searchWeather()"class="input_txt"placeholder="请输入查询地"/><button class="input_sub" @click="searchWeather()">搜 索</button></div><div class="hotkey"><a href="javascript:;" @click="changeCith('北京')">北京</a><a href="javascript:;" @click="changeCith('海口')">海口</a><a href="javascript:;" @click="changeCith('广州')">广州</a><a href="javascript:;" @click="changeCith('长沙')">长沙</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><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="/npm/vue/dist/vue.js"></script><!-- 官网提供的 axios 在线地址 --><script src="/axios/dist/axios.min.js"></script><!-- 带入外部写的js --><script src="./js/main.js"></script></body></html>
6、js完整代码及接口
/*请求地址:/weather_mini请求方法:get请求参数:city(城市名)响应内容:天气信息1.点击回车2.查询数据3.渲染数据*/var app = new Vue({el:'#app',data:{city:'',weatherList:[]},methods:{searchWeather:function(){axios.get("/weather_mini?city="+this.city).then((res)=>{console.log(res.data.data.forecast);this.weatherList=res.data.data.forecast}).catch((err)=>{console.log(err);})},changeCith:function(city){this.city=city;this.searchWeather();}}})
7、结束语
至此，天知道查询天气实例就开发完毕了，你是不是对Vue更加了解了呢，注意一下，过程中的代码并非源代码，直接使用可能会出bug，只是展示了相关功能的部分核心代码，
希望对你有所帮助，还请点赞关注一波~
下面附上本次项目源代码：
链接：/s/1LlJA30uaYatiQ4diF0ig7Q
提取码：hg6v
最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~
点击进入Vue❤学习专栏~
学如逆水行舟，不进则退
如果觉得《 零基础 Vue快速入门 教开发天气查询网页—天知道（激发编程乐趣）【整理+源码】》对你有帮助，请点赞、收藏，并留下你的观点哦！
