Vue implementiert eine kleine Wettervorhersageanwendung

Vue implementiert eine kleine Wettervorhersageanwendung

Dies ist eine Website, die ich nachgeahmt habe, als ich mir das Vue-Framework selbst beigebracht habe. Sie können die Wetterbedingungen einiger Städte überprüfen. Sie können einen Blick darauf werfen:

HTML Quelltext

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
  <meta http-equiv="X-UA-kompatibel" content="ie=edge" />
  <title>Huanxin weiß</title>
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/index.css" />
</Kopf>

<Text>
  <div Klasse="wrap" id="App">
    <div class="Suchformular">
      <div class="logo"><p style="color: red;text-align: center; font-size: 64px;">Prüfen Sie das Wetter</p></div>
      <div Klasse="Formulargruppe">
        <input type="text" class="input_txt" placeholder="Bitte geben Sie das Wetter ein, das Sie abfragen möchten" v-model="city" @keyup.enter="queryWeather" />
        <button class="input_sub" @click="queryWeather">
          Suche</button>
      </div>
      <div Klasse="Hotkey">
        <!-- <a href="javascript:;" @click="clickSearch('Suche')">Suche</a>
          <a href="javascript:;" @click="clickSearch('Suche')">Suche</a>
          <a href="javascript:;" @click="clickSearch('Guangzhou')">Guangzhou</a>
          <a href="javascript:;" @click="clickSearch('Suche')">Suche</a> -->
        <a href="javascript:;" v-for="Stadt in hotCitys" @click="clickSearch(Stadt)">{{ Stadt }}</a>
      </div>
    </div>
    <ul class="Wetterliste">
      <li v-for="(Artikel, Index) in Prognoseliste" :key="Artikel.Datum" :style="{TransitionDelay:Index*100+'ms'}">
        <div Klasse="Infotyp">
          <span class="iconfont">{{ Artikel.Typ }}</span>
        </div>
        <div Klasse="info_temp">
          <b>{{ Artikel.niedrig}}</b>
          ~
          <b>{{ Artikel.hoch}}</b>

        </div>
        <div Klasse="info_date">
          <span>{{ Artikel.Datum }}</span>
        </div>
      </li>
    </ul>
  </div>
  <!-- Entwicklungsversion, einschließlich hilfreicher Befehlszeilenwarnungen -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- Axios-Onlineadresse bereitgestellt von der offiziellen Website-->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <Skript>
    neuer Vue({
      el: "#app",
      Daten: {
        Stadt: "Wuhan",
        Prognoseliste: [],
        hotCitys: ["Peking", "Shanghai", "Guangzhou", "Shenzhen"]
      },
      Methoden: {
        AbfrageWetter() {
          diese.prognoseListe = [];
          Achsen
            .get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`)
            .then(res => {
              konsole.log(res);
              diese.prognoseliste = res.data.data.prognose;
            })
            .catch(err => {
              console.log(fehler);
            })
            .finally(() => { });
        },
        clickSearch(Stadt) {
          diese.Stadt = Stadt;
          diese.queryWeather();
        }
      }
    });
  </Skript>
</body>

</html>

JS-Code

/*
  Anfrageadresse: http://wthrcdn.etouch.cn/weather_mini
  Anforderungsmethode: get
  Anfrageparameter: city (Städtename)
  Inhalt der Antwort: Wetterinformationen 1. Enter klicken 2. Daten abfragen 3. Daten rendern */
 var app = new Vue({
     el:"#app",
     Daten:{
         Stadt:'',
         Wetterliste:[]
     },
     Methoden: {
         sucheWetter:funktion(){
            // console.log('Wetterabfrage');
            // konsole.log(diese.stadt);
            //Schnittstelle aufrufen//Speichern
            var das = dies;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
            .dann(Funktion(Antwort){
                // console.log(Antwort);
                Konsole.log(Antwort.Daten.Daten.Prognose);
                that.weatherList = Antwort.Daten.Daten.Prognose
            })
            .catch(Funktion(Fehler){})
         }
     },
 })

CSS-Datei für die Homepage

Körper{
    Schriftfamilie: „Microsoft YaHei“;   
}
.wickeln{
    Position: fest;
    links: 0;
    oben: 0;
    Breite: 100 %;
    Höhe: 100 %;
    /* Hintergrund: radialer Farbverlauf(#f3fbfe, #e4f5fd, #8fd5f4); */
    /* Hintergrund:#8fd5f4; */
    /* Hintergrund: linearer Farbverlauf(#6bc6ee, #fff); */
    Hintergrund:#fff;

}
.Suchformular{
    Breite: 640px;
    Rand: 100px automatisch 0;
}
.logo img{
    Anzeige:Block;
    Rand: 0 automatisch;
}
.form_group{
    Breite: 640px;
    Höhe: 40px;
    Rand oben: 45px;
}
.input_txt{
   Breite: 538px;
   Höhe: 38px;
   Polsterung: 0px;
   schweben: links;
   Rand: 1px durchgezogen #41a1cb;
   Umriss: keiner;
   Texteinzug: 10px;
}

.input_sub{
    Breite: 100px;
    Höhe: 40px;
    Rand: 0px;
    schweben: links;
    Hintergrundfarbe: #41a1cb;
    Farbe: #fff;
    Schriftgröße: 16px;
    Umriss: keiner;
    Cursor: Zeiger;
    Position: relativ;
}
.input_sub.loading::vor{
    Inhalt:'';
    Position: absolut;
    links: 0;
    oben: 0;
    Breite: 100 %;
    Höhe: 100%;
    Hintergrund: URL ('../img/loading.gif');
}

.Hotkey{
    Rand: 3px 0 0 2px;
}

.hotkey a{
    Schriftgröße: 14px;
    Farbe: Nr. 666;
    Polsterung rechts: 15px;
}
.Wetterliste{
    Höhe: 200px;
    Textausrichtung: zentriert;
    Rand oben: 50px;
    Schriftgröße: 0px;
}
.wetterliste li{
    Anzeige: Inline-Block;
    Breite: 140px;
    Höhe: 200px;
    Polsterung: 0 10px;
    Überlauf: versteckt;
    Position: relativ;
    Hintergrund: URL ('../img/line.png') rechts Mitte, keine Wiederholung;
    Hintergrundgröße: 1px 130px;
}

.wetterliste li:last-child{
    Hintergrund: keiner;
}

/* .wetterliste .col02{
    Hintergrundfarbe: rgba(65, 165, 158, 0,8);
}
.wetterliste .col03{
    Hintergrundfarbe: rgba(94, 194, 237, 0,8);
}
.wetterliste .col04{
    Hintergrundfarbe: rgba(69, 137, 176, 0,8);
}
.wetterliste .col05{
    Hintergrundfarbe: rgba(118, 113, 223, 0,8);
} */


.info_datum{
    Breite: 100 %;
    Höhe: 40px;
    Zeilenhöhe: 40px;
    Farbe: Nr. 999;
    Schriftgröße: 14px;
    links: 0px;    
    unten: 0px;    
    Rand oben: 15px;
}
.info_date b{
    schweben: links;
    Rand links: 15px;
}

.info_typ span{
    Farbe: #fda252;
    Schriftgröße: 30px;
    Zeilenhöhe: 80px;
}
.info_temp{
    Schriftgröße: 14px;  
    Farbe: #fda252;
}
.info_temp b{
    Schriftgröße: 13px;
}
.temp .iconfont {
    Schriftgröße: 50px;
  }

CSS-Datei zurücksetzen

Körper,ul,h1,h2,h3,h4,h5,h6{
    Rand: 0;
    Polsterung: 0;
}
h1,h2,h3,h4,h5,h6{
    Schriftgröße: 100 %;
    Schriftstärke: normal;
}
A{
    Textdekoration: keine;
}
ul{
    Listenstil: keiner;
}
img{
    Rand: 0px;
}

/* Schweben löschen, um Zusammenbruch des oberen Rands zu vermeiden*/
.clearfix:vorher,.clearfix:nachher{
    Inhalt:'';
    Anzeige:Tabelle;    
}
.clearfix:nach{
    klar: beides;
}
.clearfix{
    Zoom: 1;
}

.fl{
    schweben: links;
}
.fr{
    schweben: rechts;
}

Testergebnisse

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung zur Verwendung von Vue zum Laden von Wetterkomponenten
  • Vue implementiert eine Wettervorhersagefunktion
  • So verwenden Sie webSocket zum Aktualisieren des Echtzeitwetters in Vue
  • Vue – Erste Schritte mit der Wettervorhersage

<<:  Detaillierte Erläuterung der MySQL-Replikationsprinzipien und praktischen Anwendungen

>>:  Der komplette Prozess der iptables-Regeln in Docker geht nach dem Neustart von iptables verloren

Artikel empfehlen

Div kann Inhalte eingeben, ohne die Eingabe als Eingabefeld zu verwenden, um den automatischen Eingabestil zu blockieren

Heute habe ich einen dynamischen Fensterstil für d...

Der HTML 5-Entwurf wurde kein formeller Standard

<br />Gestern habe ich beim W3C gesehen, das...

Eine kurze Diskussion über die entsprechenden Versionen von node node-sass sass-loader

Inhaltsverzeichnis Die Knotenversion stimmt nicht...

Zusammenfassung gängiger MySQL-Funktionsbeispiele [Aggregatfunktionen, Zeichenfolgen, Zahlen, Zeit- und Datumsverarbeitung usw.]

Dieser Artikel beschreibt die häufig verwendeten ...

Als der Interviewer nach dem Unterschied zwischen char und varchar in mysql fragte

Inhaltsverzeichnis Unterschied zwischen char und ...

Das WeChat-Applet implementiert einen Countdown zum Senden des SMS-Bestätigungscodes

In diesem Artikel finden Sie den spezifischen Cod...

Installation von VMware Workstation unter Linux (Ubuntu)

Wenn Sie nicht wissen, wie das System auf dem Com...

Lösen Sie das Problem „Willkommen bei nginx auf Fedora!“. Nach der Installation von nginx auf Centos7 befindet sich im Verzeichnis conf.d keine Datei default.conf.

Problembeschreibung Installieren Sie nginx auf Te...

Detailliertes Tutorial zur Installation des Apache-Quellcodes und zur Konfiguration des virtuellen Hosts

Installieren Sie Apache aus der Quelle 1. Laden S...

Eine kurze Analyse der Konfigurationselemente des Angular CLI-Releasepfads

Vorwort Bei der Projektfreigabe ist immer eine Ve...

So bewerben Sie sich für Webdesign-Jobs

<br />Hallo zusammen! Es ist mir eine Ehre, ...

MySQL-Lösung zur Datenpaging-Abfrageoptimierung auf Millionenebene

Wenn die Tabelle Zehntausende Datensätze enthält,...

So richten Sie das Terminal so ein, dass Anwendungen nach dem Start von Ubuntu ausgeführt werden

1. Geben Sie „Start“ in die Menüleiste ein und kl...

Detaillierte Erläuterung der Sicherung und Wiederherstellung von PSSQL-Datenbanken in Docker

1. Postgres-Datenbanksicherung in Docker Befehl: ...

Details zur Verwendung des JSON-Typs in MySQL 5.7

JSON ist ein leichtes Datenaustauschformat, das e...