1. Was ist Vue Vue ist ein fortschrittliches Framework zum Erstellen von Benutzerseiten. Anders als andere große Frameworks ist Vue darauf ausgelegt, Schicht für Schicht von unten nach oben angewendet zu werden. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene. Dies erleichtert nicht nur den Einstieg, sondern lässt sich auch problemlos in Bibliotheken von Drittanbietern oder vorhandene Projekte integrieren. Andererseits ist Vue in Kombination mit einer modernen Toolchain und verschiedenen unterstützenden Bibliotheken durchaus in der Lage, komplexe Single-Page-Anwendungen auszuführen. 2. Unterschiede zu nativem JS Wir können dies anhand eines kleinen Falles demonstrieren Beispiel: Informationen im Eingabefeld im Span-Tag in Echtzeit anzeigen Natives JS
<Text>
<Eingabe-ID='txt' Typ="text">
<span id='con'></span>
</body>
<Skript>
document.querySelector('#txt').addEventListener('keyup', Funktion () {
document.querySelector('#con').innerHTML = dieser.Wert
})
</Skript> Ausblick
<Text>
<div id="app">
<Eingabe-ID='txt' Typ="Text" v-Modell="msg">
<span id='con'>{{msg}}</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<Skript>
let app = neues Vue({
el: "#app",
Daten: {
Nachricht: ""
}
})
</Skript> Unterschied: Der offensichtliche Unterschied besteht darin, dass der Betrieb von DOM-Elementen weggelassen wird Zusammenfassen: - Erstellen Sie ein DOM-Element und machen Sie es zum Einhängepunkt der Vue-Instanz. Alle Daten in der Vue-Instanz können im Einhängepunkt verwendet werden.
- Erstellen Sie ein Instanzobjekt über
new Vue -
el Attribut gibt den Einhängepunkt der aktuellen Vue-Instanz an - Die Daten in
data sind die Modelldaten, die von der aktuellen Vue-Instanz abhängen. Sie können die Daten anzeigen, indem Sie app.msg in die Konsole eingeben. - Die Daten in Daten können durch Interpolationsausdrücke verwendet werden
3. Datenbindung Die Datenbindung besteht darin, die Daten im Datenattribut der Vue-Instanz im Einhängepunkt anzuzeigen 1. Inhaltliche Verbindlichkeit Zeigen Sie die Daten in Daten als Inhalt an
<div id='App'>
<p>{{msg}}</p>
</div> Wenn Sie HTML-Tags anzeigen möchten, verwenden Sie einfach v-html in den Tags.
<div id='App'>
<p v-html>{{msg}}</p>
</div> 2. Eigentumsbindung Verwenden Sie die Daten in Daten als Attributwert eines Elements Verwenden Sie einfach v-bind . Die Attribute können eingebaut oder angepasst werden. Die Kurzform lautet :
<p v-bind:id="Ich würde" :class="Klasse">{{msg}}</p> 3. Der Wert des Formular-Tags Mit der v-model Direktive können Sie die bidirektionale Datenbindung in Formular-Tags verwenden. Es wird automatisch die richtige Methode zum Aktualisieren des Elements basierend auf dem Steuerelementtyp ausgewählt. 1. Textboxen und Textfelder
<Eingabetyp:'Text' v-Modell="msg"></Eingabe>
<Textbereich v-Modell:'msg'><Textbereich> 2. Kontrollkästchen
<div id='App'>
<label für:'schwimmen'><label>
<Eingabetyp='Kontrollkästchen' ID=schwimmen v-Modell='isSwim'/>
<label for="read">Lesen</label>
<input type="checkbox" id="lesen" v-model="isRead">
<label for="play">Spiel</label>
<Eingabetyp="Kontrollkästchen" ID="abspielen" v-Modell="isPlay">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<Skript>
let app = neues Vue({
el:"#app",
Daten:{
isSwim:true,
isRead:true,
isPlay:false
}
})
</Skript> Optionsfeld
<div id="app">
<label for="man">Männlich</label>
<input type="radio" id="mann" value="mann" v-model="geschlecht">
<label for="women">Frauen</label>
<input type="radio" id="Frauen" value="Frauen" v-model="Geschlecht">
{{Geschlecht}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<Skript>
let app = neues Vue({
el:"#app",
Daten:{
Geschlecht:''
}
})
</Skript> Dropdown-Feld
<div id="app">
<Wählen Sie v-Modell="Stadt">
<option disabled value="">Bitte wählen</option>
<option value="bj">Peking</option>
<option value="sh">Shanghai</option>
</Auswählen>
{{Stadt}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<Skript>
let app = neues Vue({
el:"#app",
Daten:{
Stadt:""
}
})
</Skript> Übergeben von Parametern
<div id='App'>
<button v-on:click="showInfo('hallo')">Schaltfläche</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<Skript>
let app = neues Vue({
el:"#app",
Daten:{
Titel: „Neujahr“
},
Methoden:{
showInfo:Funktion(Nachricht){
console.log(Nachricht)
}
}
})
</Skript> 4. Ereignisbehandlung Mit v-on können Sie auf DOM-Ereignisse warten und JavaScript-Code ausführen, wenn diese ausgelöst werden.
<div id=app>
<button v-on:click='begrüßen'></button>
</div>
var app = new Vue({
el:'#app',
Daten:{
Name:'Holle Vue'
},
//Methoden in Methoden definieren:{
Begrüßung:Funktion(Ereignis){
//dies zeigt auf die Vue-Instanz in der Methode alert(this.name + '!')
wenn (Ereignis) {
Alarm(Ereignis.Ziel.TagName)
}
}
}) 5. Listen-Rendering Wir können v-for Direktive verwenden, um eine Liste basierend auf einem Array zu rendern. v-for erfordert eine spezielle Syntax in der Form item in items , wobei items das Quell-Daten-Array und item ein Alias für das iterierte Array-Element ist.
<div id='App'>
<ul>
<li v-for="blog in blogs">{{blog}}</li>
</ul>
<ul>
<li v-for="stu in stus">Name: {{stu.name}} Alter: {{stu.age}}</li>
</ul>
</div>
var app = new Vue({
el:"#app",
Daten:{
Blogs:['Übung der Drei Königreiche','Reise nach Westen','Alter Meister Q'],
stus:[
{Name:'Xiao Ming',Alter:18},
{Name:'Xiao Zhang',Alter:11},
{Name:'Xiao Wang',Alter:12}
]
}
}) Daten vom Server abrufen
<Text>
<div id="app">
<ul>
<li v-for="item in books">{{item.title}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<Skript>
let app = neues Vue({
el: '#app',
Daten: {
Bücher: [],
},
erstellt: Funktion () {
holen('data.json')
.then((res) => {
return res.json()
})
.then((res) => {
diese.Bücher = res
})
},
})
</Skript> 6. Bedingtes Rendern 1. Die v-if Direktive wird verwendet, um einen Inhalt bedingt darzustellen
<div v-if=true>hallo Vue</div> 2. Sie können auch v-else verwenden, um einen else-Block hinzuzufügen
<div v-if=false>hallo Vue</div>
<div v-else>Hallo Welt</div> 3. Verwenden Sie v-if Gruppierung für bedingtes Rendering für das <template> -Element Wenn Sie mehrere Elemente wechseln müssen, können Sie template v-if hinzufügen. Da das <template> -Element ein unsichtbares Element ist, enthält das gerenderte Ergebnis <template> -Element nicht.
<Vorlage v-if="ok">
<h1>Titel</h1>
<p>Absatz 1</p>
<p>Absatz 2</p>
</Vorlage> 4. v-if-else fungiert, wie der Name schon sagt, als else if-Block von v-if und kann kontinuierlich verwendet werden
<div v-if="Punktzahl==100">
Volle Punktzahl</div>
<div v-else-if="Punktzahl>=80 && Punktzahl<100">
Gut</div>
<div v-else-if="Punktzahl>=70 && Punktzahl<=60">
Bestehen</div>
<div v-else-if="Ergebnis<60">
Fehlgeschlagen</div>
<div v-sonst>
Bitte geben Sie den korrekten Punktestand ein</div> 5. v-show zeigt Elemente auch basierend auf Bedingungen an
<div v-show="ok">hallo</div> Im Gegensatz zu v-if wird das v-show Element immer gerendert und verbleibt im DOM. Im Allgemeinen sind die Umschaltkosten v-if höher, während die anfänglichen Renderkosten v-show höher sind. Wenn Sie daher sehr häufig wechseln müssen, ist es besser v-show zu verwenden; wenn sich die Bedingungen während der Laufzeit selten ändern, ist es besser v-if zu verwenden.
7. Klassen- und Stilbindung Wir können v-bind verwenden, um Klassennamen oder Inline-Stile zu binden Bind-Klasse zum dynamischen Wechseln von Klassen und kann auch mit normalen Klassen koexistieren
<div Klasse = "static" v-bind:class = "{active:isActive,'text-danger:hasError'}"></div>
Daten{
istAktiv:true
hatFehler:false
} Das Rendering-Ergebnis ist:
<div Klasse = 'statisch aktiv'></div> Binden von Stilen auf Inline-Ebene Syntax v-bind:style
<div v-bind:style='{color:activeColor,fontSize:fontSize+'px'}'></div>
Daten:{
aktiveFarbe:"rot",
Schriftart: 13
} Sie können auch direkt an ein Stilobjekt binden, was die Vorlage übersichtlicher macht
<div v-bind:style="aktiv"></div>
Daten:{
aktiv:{
Farbe: "rot",
Schriftgröße: '30px'
}
} 8. Berechnete Eigenschaften Wenn wir den Wert in der Vorlage berechnen müssen, können wir berechnete Eigenschaften verwenden (berechnet)
<div id="#app">
<p>{{Nachricht}}</p>
<p>{{umgekehrte Nachricht}}</p>
</div>
var app = new Vue({
el:"#app",
Daten:{
Nachricht: „Hallo“
},
berechnet:{
reverMessage(){
gib diese.Nachricht.Split('').Reverse().Join('') zurück
}
}
}) 9. Zuhörer Listener können Datenänderungen auf einer Vue-Instanz beobachten und darauf reagieren.
<div id="app">
<div>
Frage: <input v-model="question">
</div>
<div>{{Antwort}}</div>
</div>
var app = new Vue({
el: "#app",
Daten: {
Frage: "",
Antwort: [],
},
betrachten:
Frage(neuerWert) {
dies.getAnswer()
}
},
Methoden: {
getAnswer: Funktion () {
lass das = dies
axios.get('http://localhost:3000/answer.php?q=' + diese.Frage)
.then(Funktion (Antwort) {
das.Antwort = Antwort.Daten
})
}
}
}) PHP Code (in Englisch)
<?php
$frage = $_GET['q'];
$antwort=[];
Schalter($Frage){
Fall "klein":
$answer=['Kleines Kind', 'Kleine Schwester', 'Kleines Frischfleisch'];
brechen;
Fall „Wenig Frischfleisch“:
$answer=['Was ist Frischfleisch?', 'Was nützt Frischfleisch?', 'Kann man Frischfleisch essen?'];
brechen;
Fall „Junger gutaussehender Typ spielt Schauspielerei“:
$answer=["Das Schauspiel des jungen Schauspielers ist zu künstlich","Der junge Schauspieler wurde gesperrt","Der junge Schauspieler kann kein Schauspieler sein"];
brechen;
}
echo json_encode($antwort);
?> Demo
PHP-Code ```php
<?php
$frage = $_GET['q'];
$antwort=[];
Schalter($Frage){
Fall "klein":
$answer=['Kleines Kind', 'Kleine Schwester', 'Kleines Frischfleisch'];
brechen;
Fall „Wenig Frischfleisch“:
$answer=['Was ist Frischfleisch?', 'Was nützt Frischfleisch?', 'Kann man Frischfleisch essen?'];
brechen;
Fall „Junger gutaussehender Typ spielt Schauspielerei“:
$answer=["Das Schauspiel des jungen Schauspielers ist zu künstlich","Der junge Schauspieler wurde gesperrt","Der junge Schauspieler kann kein Schauspieler sein"];
brechen;
}
echo json_encode($antwort);
?> Demo 
10. Spielautomaten Slot-Inhalte
var el_div = {
Vorlage:
<div><Steckplatz></Steckplatz></div>
}
<div id=app>
<el-div>
<span>Slot-Inhalte</span>
</el-div>
</div> Beim Rendern der Komponente wird slot durch <span>插槽內容</span> ersetzt. Slots können jeden beliebigen Vorlagencode enthalten Fallback-Inhalte Manchmal ist es nützlich, für einen Slot bestimmten Fallback-Inhalt (also Standardinhalt) festzulegen, der nur gerendert wird, wenn kein Inhalt bereitgestellt wird. Beispielsweise in einer <submit-button> -Komponente:
<button type="senden">
<Steckplatz></Steckplatz>
</button> In den meisten Fällen möchten wir, dass dieser <button> den Text „Senden“ rendert. Um „Senden“ als Fallback-Inhalt zu verwenden, können wir es in ein <slot> -Tag einfügen:
<button type="senden">
<slot>Senden</slot>
</button> Wenn ich jetzt <submit-button> in einer übergeordneten Komponente verwende und keinen Slot-Inhalt bereitstelle:
<Senden-Schaltfläche></Senden-Schaltfläche> Der Fallback-Inhalt „Senden“ wird gerendert:
<button type="senden">
Einreichen
</button> 
Aber wenn wir Inhalte bereitstellen:
<Senden-Schaltfläche>
Speichern
</Absenden-Schaltfläche> Dann wird der bereitgestellte Inhalt anstelle des Fallback-Inhalts gerendert:
<button type="senden">
Speichern
</button> 
Benannte Slots Manchmal benötigen wir mehr als einen Slot. Beispielsweise für eine <base-layout> -Komponente mit der folgenden Vorlage:
<div Klasse="Container">
<Kopfzeile>
<!-- Hier möchten wir den Seitenkopf einfügen -->
</header>
<Haupt>
<!-- Hier möchten wir den Hauptinhalt einfügen-->
</main>
<Fußzeile>
<!-- Hier möchten wir den Footer einfügen -->
</Fußzeile>
</div> Für solche Fälle hat das <slot> -Element ein spezielles Attribut: name . Mit diesem Attribut können zusätzliche Slots definiert werden:
<div Klasse="Container">
<Kopfzeile>
<slot name="header"></slot>
</header>
<Haupt>
<Steckplatz></Steckplatz>
</main>
<Fußzeile>
<slot name="Fußzeile"></slot>
</Fußzeile>
</div> Ein <slot> -Exit ohne name hat den impliziten Namen „default“. Wenn wir einem benannten Slot Inhalt bereitstellen, können wir die Direktive v-slot auf ein <template> -Element anwenden und seinen Namen als Argument für v-slot angeben:
<Basislayout>
<Vorlage v-slot:header>
<h1>Hier könnte ein Seitentitel stehen</h1>
</Vorlage>
<p>Ein Absatz für den Hauptinhalt.</p>
<p>Und noch einer.</p>
<Vorlage v-slot:footer>
<p>Hier sind einige Kontaktinformationen</p>
</Vorlage>
</Basislayout> Jetzt wird der gesamte Inhalt innerhalb des <template> -Elements an die entsprechenden Slots übergeben. Jeder Inhalt, der nicht in <template> mit v-slot verpackt ist, wird als Inhalt des Standardslots behandelt. Wenn Sie es jedoch deutlicher machen möchten, können Sie den Inhalt des Standard-Slots dennoch in ein <template> einschließen:
<Basislayout>
<Vorlage v-slot:header>
<h1>Hier könnte ein Seitentitel stehen</h1>
</Vorlage>
<Vorlage v-slot:default>
<p>Ein Absatz für den Hauptinhalt.</p>
<p>Und noch einer.</p>
</Vorlage>
<Vorlage v-slot:footer>
<p>Hier sind einige Kontaktinformationen</p>
</Vorlage>
</Basislayout> Jedes davon wird angezeigt:
<div Klasse="Container">
<Kopfzeile>
<h1>Hier könnte ein Seitentitel stehen</h1>
</header>
<Haupt>
<p>Ein Absatz für den Hauptinhalt.</p>
<p>Und noch einer.</p>
</main>
<Fußzeile>
<p>Hier sind einige Kontaktinformationen</p>
</Fußzeile>
</div> Oben finden Sie den detaillierten Inhalt der wichtigsten Kenntnisse, die beim Erlernen von Vue beherrscht werden müssen. Weitere Informationen zu den wichtigsten Kenntnissen von Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:- Detaillierte Untersuchung der Verwendung und Prinzipien von Vue nextTick
- Erfahren Sie mehr über Beispiele für Vue-Komponenten
- Erfahren Sie mehr über das bedingte Rendering von Vue.js
- Erfahren Sie mehr über die berechneten Eigenschaften von Vue.js
- Einfaches Lernen der Vue-Direktive
- Lernunterlagen zum Schreiben des ersten Vue-Programms
| 
