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: