Zusammenfassung der Grundlagen der Vue-Komponenten

Zusammenfassung der Grundlagen der Vue-Komponenten

Komponentengrundlagen

1 Wiederverwendung von Komponenten

Komponenten sind wiederverwendbare Vue-Instanzen.

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">  
  <Stil>
   
  </Stil>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </Kopf>
 <Text>
		<div id="app">
			<Schaltflächenzähler></Schaltflächenzähler>
			<Schaltflächenzähler></Schaltflächenzähler>
			<Schaltflächenzähler></Schaltflächenzähler>
		</div>
  <Skript>
			// Definieren Sie eine neue Komponente namens button-counter Vue.component('button-counter', {
				Daten: Funktion () {
					zurückkehren {
						Anzahl: 0
					}
				},
				Vorlage: '<button v-on:click="count++">{{ count }} Mal geklickt.</button>'
			});

			neues Vue({ el: '#app' });
  </Skript>
 </body>
</html>

Beachten Sie, dass beim Klicken auf die Schaltfläche jede Komponente ihre Zählung unabhängig beibehält. Hier muss die Dateneigenschaft der benutzerdefinierten Komponente eine Funktion sein und jede Instanz verwaltet eine unabhängige Kopie des zurückgegebenen Objekts.

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">  
  <Stil>
   
  </Stil>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </Kopf>
 <Text>
		<div id="app">
			<Schaltflächenzähler></Schaltflächenzähler>
			<Schaltflächenzähler></Schaltflächenzähler>
			<Schaltflächenzähler></Schaltflächenzähler>
		</div>
  <Skript>
			var buttonCounterData = {
				Anzahl: 0
			}
			// Definieren Sie eine neue Komponente namens button-counter Vue.component('button-counter', {
				Daten: Funktion () {
					Zurück-ButtonZählerDaten
				},
				Vorlage: '<button v-on:click="count++">{{ count }} Mal geklickt.</button>'
			});

			neues Vue({ el: '#app' });
  </Skript>
 </body>
</html>

2 Übergeben von Daten an untergeordnete Komponenten über Props

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">  
  <Stil>
   
  </Stil>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </Kopf>
 <Text>
		<div id="app">
			<blog-post title="Meine Reise mit Vue"></blog-post>
			<blog-post title="Bloggen mit Vue"></blog-post>
			<blog-post title="Warum Vue so viel Spaß macht"></blog-post>
		</div>
  <Skript>
			Vue.component('Blog-Beitrag', {
				Requisiten: ['Titel'],
				Vorlage: '<h3>{{ Titel }}</h3>'
			})

			neues Vue({ el: '#app' });
  </Skript>
 </body>
</html>

Hier übergibt <blog-post> Daten über das benutzerdefinierte Attribut „ title .
Wir können v-bind verwenden, um Props dynamisch zu übergeben.

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">  
  <Stil>
   
  </Stil>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </Kopf>
 <Text>
		<div id="app">
			<blog-post v-for="Beitrag in Beiträgen" v-bind:key="post.id" v-bind:title="post.title"></blog-post>
		</div>
  <Skript>
			Vue.component('Blog-Beitrag', {
				Requisiten: ['Titel'],
				Vorlage: '<h3>{{ Titel }}</h3>'
			})

			neuer Vue({
				el: '#app',
				Daten: {
					Beiträge:
						{ id: 1, title: 'Meine Reise mit Vue' },
						{ id: 2, title: 'Bloggen mit Vue' },
						{ id: 3, title: 'Warum Vue so viel Spaß macht' }
					]
				}
			});
  </Skript>
 </body>
</html>

3 Einzelnes Wurzelelement

Jede Komponente darf nur ein Stammelement haben.

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">  
  <Stil>
   
  </Stil>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </Kopf>
 <Text>
		<div id="app">
			<blog-post v-for="Beitrag in Beiträgen" v-bind:key="post.id" v-bind:post="Beitrag"></blog-post>
		</div>
  <Skript>
			Vue.component('Blog-Beitrag', {
				Requisiten: ['Beitrag'],
				Vorlage: `
					<div Klasse="Blog-Beitrag">
						<h3>{{ post.title }}</h3>
						<div v-html="beitrag.inhalt"></div>
					</div>
				`
			})

			neuer Vue({
				el: '#app',
				Daten: {
					Beiträge:
						{ id: 1, title: 'Meine Reise mit Vue', content: 'meine Reise...' },
						{ id: 2, title: 'Bloggen mit Vue', content: 'mein Blog...' },
						{ id: 3, title: ‚Warum Vue so viel Spaß macht‘, content: ‚Vue macht so viel Spaß...‘ }
					]
				}
			});
  </Skript>
 </body>
</html>

Beachten Sie, dass der durch v-bind:post="post" gebundene Beitrag ein Objekt ist, wodurch der Aufwand vermieden wird, Daten über viele Eigenschaften weiterzugeben.

4 Auf Ereignisse von Unterkomponenten warten

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">  
  <Stil>
   
  </Stil>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </Kopf>
 <Text>
		<div id="app">
			<div :style="{Schriftgröße: postFontSize + 'em'}">
				<blog-post v-for="Beitrag in Beiträgen" 
					v-bind:key="post.id" 
					v-bind:post="Beitrag"
					v-on:enlarge-text="postFontSize += 0.1" />
			</div>			
		</div>
  <Skript>
			Vue.component('Blog-Beitrag', {
				Requisiten: ['Beitrag'],
				Vorlage: `
					<div Klasse="Blog-Beitrag">
						<h3>{{ post.title }}</h3>
						<button v-on:click="$emit('enlarge-text')">Text vergrößern</button>
						<div v-html="beitrag.inhalt"></div>
					</div>
				`
			})

			neuer Vue({
				el: '#app',
				Daten: {
					postFontSize: 1,
					Beiträge:
						{ id: 1, title: 'Meine Reise mit Vue', content: 'meine Reise...' },
						{ id: 2, title: 'Bloggen mit Vue', content: 'mein Blog...' },
						{ id: 3, title: ‚Warum Vue so viel Spaß macht‘, content: ‚Vue macht so viel Spaß...‘ }
					]
				}
			});
  </Skript>
 </body>
</html>

Die untergeordnete Komponente löst ein Ereignis aus, indem sie die Methode $emit verwendet und den Ereignisnamen übergibt. Die übergeordnete Komponente kann dieses Ereignis empfangen.

Wir können Ereignisse verwenden, um einen Wert auszuwerfen.

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">  
  <Stil>
   
  </Stil>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </Kopf>
 <Text>
		<div id="app">
			<div :style="{Schriftgröße: postFontSize + 'em'}">
				<blog-post v-for="Beitrag in Beiträgen" 
					v-bind:key="post.id" 
					v-bind:post="Beitrag"
					v-on:enlarge-text="postFontSize += $event" />
			</div>			
		</div>
  <Skript>
			Vue.component('Blog-Beitrag', {
				Requisiten: ['Beitrag'],
				Vorlage: `
					<div Klasse="Blog-Beitrag">
						<h3>{{ post.title }}</h3>
						<button v-on:click="$emit('enlarge-text', 0.2)">Schrift vergrößern</button>
						<div v-html="beitrag.inhalt"></div>
					</div>
				`
			})

			neuer Vue({
				el: '#app',
				Daten: {
					postFontSize: 1,
					Beiträge:
						{ id: 1, title: 'Meine Reise mit Vue', content: 'meine Reise...' },
						{ id: 2, title: 'Bloggen mit Vue', content: 'mein Blog...' },
						{ id: 3, title: ‚Warum Vue so viel Spaß macht‘, content: ‚Vue macht so viel Spaß...‘ }
					]
				}
			});
  </Skript>
 </body>
</html>

In der übergeordneten Komponente können wir über $event auf den ausgegebenen Wert zugreifen.
Wir können das V-Modell auf Komponenten anwenden.

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">  
  <Stil>
   
  </Stil>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </Kopf>
 <Text>
		<div id="app">
			<!-- <input v-model="Suchtext"> -->
			<input v-bind:value="Suchtext" v-on:input="Suchtext = $event.target.value">
			<p>{{ Suchtext }}</p>
		</div>
  <Skript>
			neuer Vue({
				el: '#app',
				Daten: {
					Suchtext: ''
				}
			});
  </Skript>
 </body>
</html>
<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">  
  <Stil>
   
  </Stil>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </Kopf>
 <Text>
		<div id="app">
			<custom-input v-model="Suchtext"></custom-input>
			<custom-input v-bind:value="Suchtext" v-on:input="Suchtext = $event"></custom-input>
			<p>{{ Suchtext }}</p>
		</div>
  <Skript>
			Vue.component('benutzerdefinierte Eingabe', {
				Requisiten: ['Wert'],
				Vorlage: `<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" >`
			})

			neuer Vue({
				el: '#app',
				Daten: {
					Suchtext: ''
				}
			});
  </Skript>
 </body>
</html>

Abschließend noch ein Hinweis zur Vorsicht beim Parsen von DOM-Vorlagen.

Das Obige ist der detaillierte Inhalt der Zusammenfassung der Grundkenntnisse zu Vue-Komponenten. Weitere Informationen zu Vue-Komponenten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Ein Artikel, der Ihnen hilft, die Grundlagen von VUE zu verstehen
  • Eine kurze Einführung in die Kernkenntnisse der VUE uni-app
  • Ein kurzer Vortrag über die Kenntnisse, die Sie für den Einstieg in Vue beherrschen müssen
  • Eine umfassende Überprüfung der Einführungskenntnisse zu Vue-Komponenten
  • Kennen Sie die Grundkenntnisse von Vue?

<<:  Was ist ZFS? Gründe für die Verwendung von ZFS und seine Funktionen

>>:  Tutorial zur MySQL-Installation unter Linux (Binärdistribution)

Artikel empfehlen

Vue implementiert die Anzeige und Ausblendung der dreistufigen Navigation

In diesem Artikelbeispiel wird der spezifische Co...

Analyse des Prozesses zum Aufbau einer Clusterumgebung mit Apache und Tomcat

Tatsächlich ist es nicht schwierig, einen Apache-...

Detaillierte Erklärung gängiger Befehle in MySQL 8.0+

Aktivieren Sie den Fernzugriff Aktivieren Sie die...

MYSQL8.0.13 kostenlose Installationsversion Konfiguration Tutorial Beispiel detaillierte Erklärung

1. Download, ich nehme 8.0 als Beispiel Download-...

Wie stellt MySQL die Datenintegrität sicher?

Die Bedeutung von Datenkonsistenz und -integrität...

So stellen Sie eine Nextcloud-Netzwerkfestplatte mit Docker bereit

NextCloud Sie können beliebige Dateien oder Ordne...

Verwenden Sie einige Interviewfragen, um den Ausführungsmechanismus von JavaScript zu untersuchen

Inhaltsverzeichnis Vorherige Wörter Synchron und ...

JavaScript zum Erzielen eines Taobao-Produktbild-Umschalteffekts

JavaScript-Umschalteffekt für Bekleidungsalben (ä...

HTML-Cellpadding- und Cellspacing-Attribute in Bildern erklärt

Zelle -- der Inhalt der Tabelle Zellenrand (Tabell...

CSS-Implementierungscode zum Zeichnen von Dreiecken (Rahmenmethode)

1. Implementieren Sie ein einfaches Dreieck Mithi...

So positionieren Sie die Kopfzeile mithilfe des CSS-Sticky-Layouts oben

Anwendungsszenarien: Eine der neuen Anforderungen...

Was ist SSH? Wie benutzt man? Was sind die Missverständnisse?

Inhaltsverzeichnis Vorwort Was ist SSH? Wofür wir...

Detaillierte Erläuterung der MySQL sql_mode-Abfrage und -Einstellung

1. Führen Sie SQL aus, um anzuzeigen wählen Sie @...

HTML-Elemente durch Anzeige oder Sichtbarkeit verbergen

Manchmal müssen wir steuern, ob HTML-Elemente auf ...

Realisierung von Provinz- und Gemeindeverknüpfungseffekten auf Basis von JavaScript

In diesem Artikel wird der spezifische JavaScript...