2020 零基础 Vue快速入门教开发天气查询网页—天知道（激发编程乐趣）【整理+源码】

文章目录

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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 官网提供的 axios 在线地址 --><script src="https://unpkg.com/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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 官网提供的 axios 在线地址 --><script src="https://unpkg.com/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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 官网提供的 axios 在线地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><!-- 带入外部写的js --><script src="./js/main.js"></script></body>
</html>

6、js完整代码及接口

/*请求地址:http://wthrcdn.etouch.cn/weather_mini请求方法:get请求参数:city(城市名)响应内容:天气信息1.点击回车2.查询数据3.渲染数据
*/var app = new Vue({el:'#app',data:{city:'',weatherList:[]},methods:{searchWeather:function(){axios.get("http://wthrcdn.etouch.cn/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，只是展示了相关功能的部分核心代码，
希望对你有所帮助，还请点赞关注一波~
下面附上本次项目源代码：

链接：https://pan.baidu.com/s/1LlJA30uaYatiQ4diF0ig7Q
提取码：hg6v

最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~

点击进入Vue❤学习专栏~

学如逆水行舟，不进则退

2020 零基础 Vue快速入门教开发天气查询网页—天知道（激发编程乐趣）【整理+源码】相关推荐

2020 零基础 Vue综合应用教开发音乐播放器—悦听（激发编程乐趣）【整理+源码】
文章目录 1.引言 2.音乐播放器完整版效果图如下: 3.接口引用 4.示例代码 5.结束语点击进入Vue❤学习专栏~ 1.引言这是Vue学习的综合应用篇,教你开发一个音乐播放器,能听歌,能看热门 ...
零基础编程入门python视频-Python编程零基础小白快速入门完整全系列精品课
1. 课程咨询加老师助理微信:助理1微信: chenjinglei88 ,助理2微信: omf6757 2. 决定购买并想得到陈敬雷老师亲自指导(课程或自己项目难题均可)加老师微信: chenjing ...
想成为淘宝美工需要学什么？零基础怎么快速入门？
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享想成为淘宝美工需要学什么?零基础怎么快速入门?最近就有不少小伙伴私信小编,大多是问淘宝美工需要掌握哪些知识?新手要如 ...
零基础如何快速入门python（学习路线）
目前Python这门语言在人工智能.机器学习.大数据.数据分析.网络爬虫等... 领域有了比较高的地位,可以说前景是非常好的,在编程领域也是非常适合作为兴趣培养的一门语言,相比较其他不少主流编程语言, ...
「 Unity 3D」是什么？零基础如何快速入门？
一句话说明下Unity是什么,Unity是一个开发游戏,主要用于手机游戏开发的引擎,什么是引擎,引擎就是工具的意思. 零基础想自学从哪开始?一般我们学习unity3d游戏开发是要先从C++开始学起,如 ...
零基础Python培训入门教你认识下这些基础内容
Python编程语言为什么近些年这么火?从它本身的语言特性来看,Python编程简单而且直接,适合初学编程者,让初学者能够专注于编程逻辑,而不是在不流通的语法细节上感到困惑.零基础Python培训中心 ...
零基础如何快速入门学python？python全套学习路线总结
前言学习任何一门语言都是从入门(1年左右),通过不间断练习达到熟练水准(3到5年),少数人最终能精通语言,成为执牛耳者,他们是金字塔的最顶层.虽然万事开头难,但好的开始是成功的一半,今天这篇文章就来 ...
零基础小白快速入门记者，快来看这篇文章
如何做好一名记者? 如何选题? 如何写稿? 如何采访? -- 这些是媒体实习生们最常见的问题,本篇就如何快速入门记者行业做个系统总结,希望能帮助到实习生们. 选题:选题,是衡量着文章内容方向,价值观. ...
零基础如何快速入门自媒体，三步带你上热门
最近私信问的最多的就是零基础的小白想做自媒体博主应该怎么入门?今天就从视频剪辑.文案.素材三个方面给大家一个解决方案,全程干货建议收藏! 第一.学习视频剪辑 b站和我要自学网我认识的很多博主都是在这里 ...

2020 零基础 Vue快速入门教开发天气查询网页—天知道（激发编程乐趣）【整理+源码】

文章目录

1、引言

2、天知道概述

3、模板展示

4、回车键查询功能开发

5、点击查询功能开发

6、js完整代码及接口

7、结束语

点击进入Vue❤学习专栏~

2020 零基础 Vue快速入门教开发天气查询网页—天知道（激发编程乐趣）【整理+源码】相关推荐

最新文章

热门文章

2020 零基础 Vue快速入门 教开发天气查询网页—天知道（激发编程乐趣）【整理+源码】

文章目录

1、引言

2、天知道概述

3、模板展示

4、回车键查询功能开发

5、点击查询功能开发

6、js完整代码及接口

7、结束语

点击进入Vue❤学习专栏~

2020 零基础 Vue快速入门 教开发天气查询网页—天知道（激发编程乐趣）【整理+源码】相关推荐

最新文章

热门文章

2020 零基础 Vue快速入门教开发天气查询网页—天知道（激发编程乐趣）【整理+源码】

2020 零基础 Vue快速入门教开发天气查询网页—天知道（激发编程乐趣）【整理+源码】相关推荐