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:
|
<<: Zusammenfassung von zehn Linux-Befehlsaliasen, die die Effizienz verbessern können
>>: Stapelweises Ersetzen eines Teils der Daten eines Felds in MySQL (empfohlen)
Artikel empfehlen
Implementierung der Fastdfs+Nginx-Clusterkonstruktion
1. Einführung in Fastdfs 1. Was ist Fastdfs? Fast...
JavaScript-Offset implementiert die Erfassung der Mauskoordinaten und das Ziehen von Modulen innerhalb des Fensters
Versatz Offset ist der Offset. Mithilfe der Offse...
Vollständiger Prozessbericht der Nginx-Reverse-Proxy-Konfiguration
1. Vorbereitung Installieren Sie Tomcat auf dem L...
Detaillierte Erklärung der JS-Homologiestrategie und CSRF
Inhaltsverzeichnis Überblick Same-Origin-Policy (...
Mysql-Methode zum Kopieren einer Datenspalte einer Tabelle in eine Spalte einer anderen Tabelle
mysql kopiert eine Tabellenspalte in eine andere ...
So konfigurieren Sie einfach mehrere Server in Nginx
1: Ich werde nicht näher auf die Installation von...
So konfigurieren Sie Tomcat und führen Ihr erstes Java-Webprojekt auf IntelliJ IDEA 2018 aus
1 Tomcat herunterladen und starten Gehen Sie auf ...
Anpassungsmethode des Linux-Peripheriedateisystems
Vorwort Wenn wir von Linux-Systemen sprechen, mei...
So verwenden Sie die Lotteriekomponente des WeChat Mini-Programms
Es wird in Form von WeChat-Komponenten bereitgest...
Implementierungsschritte zum Erstellen eines FastDFS-Dateiservers unter Linux
Inhaltsverzeichnis 1. Softwarepaket 2. Installier...
Einige Möglichkeiten zum Eliminieren doppelter Zeilen in MySQL
SQL-Anweisung /* Einige Methoden zum Eliminieren ...
Linux bestätigt, dass die Datendiskette deinstalliert wurde und ein neues benutzerdefiniertes Image erstellt werden kann
Häufig gestellte Fragen zu benutzerdefinierten Bi...
Öffentliche kostenlose STUN-Server
Öffentliche kostenlose STUN-Server Wenn das SIP-T...
Anweisungen zur Verwendung der Option --rm von Docker Run
Wenn der Docker-Container beendet wird, bleibt da...
Das Fehlschlagen der Wiedergabe von FLV-/MP4- und anderen Videodateien auf der Website hängt mit dem MIME-Typ zusammen.
Beim Erstellen einer Website habe ich festgestellt...