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

Richtige Schritte zur Installation von Nginx unter Linux

Vorwort Wenn Sie wie ich ein fleißiger Java-Backe...

TD-Breitenproblem beim Zusammenführen von TD-Zellen

Im folgenden Beispiel ist die Anzeige normal, wenn...

Details zu verschiedenen Schriftformaten in HTML-Webseiten

Dieser Abschnitt beginnt mit den Details der Text...

Vue2-Implementierungen bieten Injection für Reaktionsfähigkeit

1. Konventionelles Schreiben in vue2 // Die überg...

Eine kurze Analyse der Verwendung von HTML-Float

Einige Verwendungen von Float Linke Aufhängung: f...

JS implementiert einfachen Beispielcode zur Steuerung der Videowiedergabegeschwindigkeit

Einführung Ich habe schon einmal ein Problem fest...

Einführung in JavaScript-Zahlen- und Mathematikobjekte

Inhaltsverzeichnis 1. Zahlen in JavaScript 2. Mat...

vue+element-ui implementiert die Kopfnavigationsleistenkomponente

In diesem Artikel wird der spezifische Code von v...

Centos7.3 startet oder führt beim Booten automatisch angegebene Befehle aus

In CentOS7 wurden die Berechtigungen der Datei /e...

Vergleich der Effizienz verschiedener Methoden zum Löschen von Dateien in Linux

Testen Sie die Effizienz des Löschens einer große...

Analyse der schlechten Leistung, die durch einen großen LIMIT-Offset in der MySQL-Abfrage verursacht wird

Vorwort Wir alle wissen, dass MySQL-Abfragen den ...

mysql 8.0.18 mgr-Installation und seine Umschaltfunktion

1. Systeminstallationspaket yum -y install make g...

Detaillierte Erklärung der Befehle zur Berechtigungsverwaltung in Linux (chmod/chown/chgrp/unmask)

Inhaltsverzeichnis chmod Beispiel Besonderes Auge...

HTML-Tabellen-Tag-Tutorial (35): spaltenübergreifendes Attribut COLSPAN

In einer komplexen Tabellenstruktur erstrecken si...

Praxis der Vue Global Custom-Anweisung Modal Drag

Inhaltsverzeichnis Hintergrund Umsetzungsideen Er...