Eine kurze Einführung in Vue-Filter, Lebenszyklusfunktionen und Vue-Ressourcen
1. FilterBeispiel:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<script src="vue.js"></script>
</Kopf>
<Text>
<div id="app">
//Ersetze das abc im Inhalt von msg durch ‚Hallo 123‘ und füge abschließend ‚========‘ hinzu.
<p>{{ msg | msgFormat('Hallo', '123') | test }}</p>
</div>
<Skript>
// Definieren Sie einen globalen Vue-Filter mit dem Namen msgFormat
Vue.filter('msgFormat', Funktion (msg, arg, arg2) {
// String-Ersetzungsmethode, der erste Parameter kann zusätzlich zum Schreiben eines Strings auch eine reguläre Rückgabe msg.replace(/abc/g, arg + arg2) definieren.
})
Vue.filter('test', Funktion (Nachricht) {
Rückgabewert + '========'
})
//Erstellen Sie eine Vue-Instanz und holen Sie sich das ViewModel
var vm = neuer Vue({
el: '#app',
Daten: {
Nachricht: „abc,abcdefg,hahaha“
},
Methoden: {}
});
</Skript>
</body>
</html>
2. Die Lebenszyklusfunktion von Vue 1. Was ist der LebenszyklusVon der Erstellung, dem Betrieb bis hin zur Zerstörung einer Vue-Instanz gibt es immer verschiedene Ereignisse, die zusammen als Lebenszyklus bezeichnet werden. 2. Klassifizierung der Hauptfunktionen im Lebenszyklus 1. Lebenszyklusfunktionen während der Erstellung: 2. Lebenszyklusfunktionen im Betrieb: 3. Lebenszyklusfunktionen während der Zerstörung: Beispiel:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<script src="vue.js"></script>
</Kopf>
<Text>
<div id="app">
<input type="button" value="Nachricht ändern" @click="msg='Nein'">
<h3 id="h3">{{ msg }}</h3>
</div>
<Skript>
var vm = neuer Vue({
el: '#app',
Daten: {
Nachricht: „OK“
},
Methoden: {
zeigen() {
console.log('Ausgeführte Methode anzeigen')
}
},
vorErstellen() {
Warnung('vorErstellen1')
//diese.zeigen()
// Hinweis: Wenn die Lebenszyklusfunktion beforeCreate ausgeführt wird, wurden die Daten in Daten und Methoden noch nicht initialisiert},
created() { // Dies ist die zweite angetroffene Lebenszyklusfunktion alert('created2')
// dies.zeigen()
// Beim Erstellen wurden Daten und Methoden initialisiert!
// Wenn Sie die Methoden in Methoden aufrufen oder die Daten in Daten verarbeiten möchten, können Sie zunächst nur in create} arbeiten.
beforeMount() { // Dies ist die dritte gefundene Lebenszyklusfunktion. Sie gibt an, dass die Vorlage im Speicher bearbeitet wurde, aber noch nicht auf der Seite angezeigt wurde alert('beforeMount3')
// Wenn beforeMount ausgeführt wird, wurden die Elemente auf der Seite nicht wirklich ersetzt, sondern nur einige zuvor geschriebene Vorlagenzeichenfolgen},
mounted() { // Dies ist die vierte gefundene Lebenszyklusfunktion. Sie zeigt an, dass die Vorlage im Speicher tatsächlich auf der Seite bereitgestellt wurde und der Benutzer die gerenderte Seite bereits sehen kann. alert('mounted4')
// Hinweis: Mounted ist die letzte Lebenszyklusfunktion während der Instanzerstellung. Wenn Mounted ausgeführt wird, bedeutet dies, dass die Instanz vollständig erstellt wurde. Wenn zu diesem Zeitpunkt keine andere Operation ausgeführt wird, liegt diese Instanz ruhig und bewegungslos in unserem Speicher},
// Als nächstes folgen zwei laufende Ereignisse beforeUpdate() { // Zu diesem Zeitpunkt bedeutet dies, dass unsere Schnittstelle nicht aktualisiert wurde [Wurden die Daten aktualisiert? Die Daten wurden auf jeden Fall aktualisiert.
alert('vorUpdate-Änderung')
// Fazit: Bei der Ausführung von beforeUpdate sind die auf der Seite angezeigten Daten noch alt. Zu diesem Zeitpunkt sind die Daten die neuesten und die Seite wurde noch nicht mit den neuesten Daten synchronisiert},
aktualisiert() {
console.log('Der Inhalt des Elements auf der Schnittstelle:' + document.getElementById('h3').innerText)
console.log('Die Nachrichtendaten in den Daten sind:' + this.msg)
// Wenn das aktualisierte Ereignis ausgeführt wird, werden die Seite und die Daten synchronisiert und sind alle auf dem neuesten Stand}
})
</Skript>
</body>
</html> 3. Vue-RessourceGitHub-Adresse: https://github.com/pagekit/vue-resource 1. Die Anforderungs-API von vue-resource ist im REST-Stil gestaltet. Sie bietet 7 Anforderungs-APIs
2. Parametereinführung Alle akzeptieren drei Parameter: Daten (optional, Zeichenfolge oder Objekt), die zu sendenden Daten, die durch das Datenattribut im Optionsobjekt überschrieben werden können. Optionsobjekt Parameter Typ Beschreibung url string Die angeforderte URL method string HTTP-Methode der Anfrage, zum Beispiel: „GET“, „POST“ oder andere HTTP-Methoden body Object, FormData string Anfragetext params Objekt Anfrage URL Parameter Objekt, get Header Objektanforderungsheader Anforderungsdaten von Drittanbietern erfordern eine Timeout-Nummer Anforderungstimeout in Millisekunden (0 bedeutet kein Timeout) before function(request) Die Verarbeitungsfunktion vor dem Senden der Anfrage, ähnlich der beforeSend-Funktion von jQuery progress function(event) ProgressEvent-Callback-Verarbeitungsfunktion credentials boolean Gibt an, ob Anmeldeinformationen für domänenübergreifende Anfragen erforderlich sind emulateHTTP boolean Sendet PUT-, PATCH- und DELETE-Anfragen als HTTP POST und legt das X-HTTP-Method-Override des Anfrageheaders fest emulateJSON boolean Senden Sie den Anforderungstext als Inhaltstyp application/x-www-form-urlencoded 3. Beispiele
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<script src="vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource"></script>
</Kopf>
<Text>
<div id="app">
<input type="button" value="Anfrage abrufen" @click="getInfo">
<input Typ="Schaltfläche" Wert="Anfrage posten" @click="postInfo">
<Eingabetyp="Schaltfläche" Wert="jsonp-Anfrage" @click="jsonpInfo">
</div>
<Skript>
//Erstellen Sie eine Vue-Instanz und holen Sie sich das ViewModel
var vm = neuer Vue({
el: '#app',
Daten: {},
Methoden: {
getInfo() { // Eine Get-Anfrage initiieren // Nachdem Sie eine Get-Anfrage initiiert haben, verwenden Sie .then, um die erfolgreiche Rückruffunktion this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
// Holen Sie sich die vom Server zurückgegebenen erfolgreichen Daten über result.body // console.log(result.body)
})
},
postInfo() { // Initiiere eine Post-Anfrage application/x-wwww-form-urlencoded
// Manuell initiierte Post-Anfrage, standardmäßig gibt es kein Formularformat, deshalb können manche Server sie nicht verarbeiten // Durch den dritten Parameter der Post-Methode setzt { emulateJSON: true } den übermittelten Inhaltstyp auf das normale Formulardatenformat this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
Konsole.log(Ergebnis.Body)
})
},
jsonpInfo() { // JSONP-Anfrage starten this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
Konsole.log(Ergebnis.Body)
})
}
}
});
</Skript>
</body>
</html>
Das Obige ist eine kurze Einführung in Vue-Filter, Lebenszyklusfunktionen und Vue-Ressourcen. Weitere Informationen zu Vue-Filtern, Lebenszyklusfunktionen und Vue-Ressourcen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
Artikel empfehlen
So erstellen Sie eine PHP+Nginx+Swoole+MySQL+Redis-Umgebung mit Docker
Betriebssystem: Alibaba Cloud ESC-Instanz centos7...
Detailliertes grafisches Tutorial zur Installation der entpackten Version von MySQL unter Windows 10
Die MySQL-Installation ist in eine Installationsv...
Zabbix benutzerdefinierte Überwachung Nginx Status Implementierungsprozess
Inhaltsverzeichnis Zabbix benutzerdefinierte Über...
js, um Sternblitzeffekte zu erzielen
In diesem Artikelbeispiel wird der spezifische Co...
Beispiel für die CSS3-Clear-Float-Methode
1. Zweck Durch diesen Artikel kann jeder die Prin...
MySql-Abfrageanweisung mit mehreren Bedingungen und dem Schlüsselwort „OR“
Im vorherigen Artikel wurde die MySql-Abfrageanwe...
Beheben Sie den Fehler „ExtUtils/MakeMaker.pm kann in @INC nicht gefunden werden“
Bei der Installation von mha4mysql sind die Schri...
So füllen Sie Elemente in Spalten im CSS-Rasterlayout
Angenommen, wir haben n Elemente und müssen diese...
Führen Sie die Schritte zum Upgrade von Nginx http auf https aus.
Der Unterschied zwischen http und https ist Bei m...
JavaScript zum Erzielen des JD.com-Blitzverkaufseffekts
In diesem Artikel wird der spezifische JavaScript...
Einführung in die Rolle des HTML-Doctypes
Der Dokumentmodus verfügt über die folgenden zwei ...
Detaillierte Erklärung der Desktop-Anwendung mit Vue3 und Electron
Inhaltsverzeichnis Vue CLI erstellt ein Vue-Proje...
Analyse und Lösung des abnormalen Problems beim Laden von JAR in Tomcat
Beschreibung des Phänomens: Das Projekt verwendet...
Design-Story: Der Wachmann, der sich Nummernschilder nicht merken kann
<br />Um die Fahrzeuge zu regeln, die in die...
Lösung für das Problem, dass der Hostname des Hosts im Docker-Container nicht abgerufen werden kann
Der Test wird in der Node.JS-Umgebung bestanden. ...