Vue – Erste Schritte mit der Wettervorhersage

In diesem Artikelbeispiel wird der spezifische Code von Vue zur Implementierung der Wettervorhersage zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Rendern

Implementierungscode

<!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>Gott weiß</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/index.css" />
    <Stil>
      [v-Umhang] {
        Anzeige: keine;
      }
    </Stil>
  </Kopf>

  <Text>
    <div Klasse="wrap" id="App">
      <div class="Suchformular">
        <div class="logo"><img src="img/logo.png" alt="logo" /></div>
        <div Klasse="Formulargruppe">
          <Eingabe
            Typ="Text"
            Klasse="Eingabe_txt"
            Platzhalter="Bitte geben Sie das abzufragende Wetter ein"
            v-Modell="Stadt"
            @keyup.enter="SucheWetter"
          />
          <button class="input_sub" @click="searchWeather">Suchen</button>
        </div>
        <div Klasse="Hotkey">
          <a href="javascript:;" @click="searchWeatherByCity('WeatherByCity')">Weather</a>
          <a href="javascript:;" @click="searchWeatherByCity('Shanghai')">Shanghai</a>
          <a href="javascript:;" @click="searchWeatherByCity('Guangzhou')">Guangzhou</a>
          <a href="javascript:;" @click="searchWeatherByCity('WeatherByCity')">WeatherByCity</a>
        </div>
      </div>
      <ul Klasse="Wetterliste" v-cloak="block">
        <li v-for="Element in Wetterliste">
          <div Klasse="Infotyp">
            <span class="iconfont">{{item.type}}</span>
          </div>
          <div Klasse="info_temp">
            <b>{{item.low}}</b>
            ~
            <b>{{item.high}}</b>
          </div>
          <div class="info_date"><span>{{item.date}}</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>
    <!-- Eigenes js -->
    <script src="./js/main.js"></script>
  </body>
</html>

index.css

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;
}


.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;
  }

zurücksetzen.css

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;
}

Haupt-JS

/*
  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() {
            wenn (diese.Stadt == '') {
                alert("Bitte geben Sie eine Stadt ein!");
            } anders {
                var das = dies;
                axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + that.city).then(Funktion (Antwort) {
                    wenn (Antwort.Daten.Status == 1002) {
                        alert("Die von Ihnen eingegebene Stadt ist falsch! Bitte erneut eingeben!");
                        diese.Stadt = '';
                    } anders {
                        that.weatherList = Antwort.Daten.Daten.Prognose;
                        Konsole.log(Antwort.Daten);
                    }
                }).catch(Funktion (Fehler) {
                    konsole.log(Fehler);
                })
            }
        },
        searchWeatherByCity(Stadt) {
            diese.Stadt = Stadt;
            dies.searchWeather();
        }
    },
})

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: