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

Der Interviewer fragte, wie man in CSS ein festes Seitenverhältnis erreicht

Möglicherweise hatten Sie für diese Frage bisher ...

Sicherheitskonfiguration und Erkennung von SSL, nachdem die Website https aktiviert hat

Heutzutage ist es für Websites Standard, SSL zu a...

So benennen Sie in Linux mehrere Dateien gleichzeitig um

Vorwort In unserer täglichen Arbeit müssen wir hä...

Das WeChat-Applet implementiert einen Videoplayer, der einen Bullet-Screen sendet

In diesem Artikel wird der spezifische Code für d...

So vergessen Sie das Root-Passwort in Mysql8.0.13 unter Windows 10

1. Stoppen Sie zuerst den MySQL-Dienst Öffnen Sie...

Vue implementiert ein einfaches Einkaufswagenbeispiel

In diesem Artikelbeispiel wird der spezifische Co...

So laden Sie Komponentenbibliotheken von Drittanbietern bei Bedarf in Vue3

Vorwort Nehmen Sie Element Plus als Beispiel, um ...

Protokoll des Kompilierungs- und Installationsprozesses des Nginx-Quellcodes

Die Installation des RPM-Pakets ist relativ einfa...

Implementierung der Funktion zum Hinzufügen einer Besuchszählung im GitHub+Jekyll-Blog in einer Minute mit JS

Inhaltsverzeichnis Fügen Sie dem GitHub+Jekyll-Bl...

Anwendungsbeispiele für React Hooks (6 gängige Hooks)

1. useState: Funktionskomponenten Status geben An...

Detaillierte Erklärung zur Verwendung von $props, $attrs und $listeners in Vue

Inhaltsverzeichnis Hintergrund 1. Dokumentbeschre...

11 Möglichkeiten, Duplikate aus JS-Arrays zu entfernen

Bei der tatsächlichen Arbeit oder bei Interviews ...

So implementieren Sie den Vue-Mausrad-Scrolling-Umschalt-Routing-Effekt

Eine Root-Routing-Komponente (die Root-Routing-Ko...

Implementierung des Imports und Exports von Docker-Images

Docker-Nutzung von Gitlab Gitlab Docker Startbefe...

Ubuntu 20.04: Beispiel zum Ändern der IP-Adresse

veranschaulichen: Als ich heute das letzte Experi...