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

最新推荐文章于 2024-02-15 18:05:10 发布

一百个Chocolate

最新推荐文章于 2024-02-15 18:05:10 发布

阅读量2.9k

点赞数 13

分类专栏： Vue全家桶系列文章标签： vue javascript java js nodejs

原则上允许部分内容转载，转载请注明原文章地址！

本文链接：https://blog.csdn.net/weixin_42429718/article/details/103972240

版权

文章目录

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">
          <input
            type="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 clas