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

Detaillierte Erläuterung des MySQL-Trigger-Trigger-Beispiels

Inhaltsverzeichnis Was ist ein Auslöser Erstellen...

Ein einfaches Beispiel für eine gemeinsame MySQL-Tabellenabfrage

MySql verwendet verknüpfte Tabellenabfragen, die ...

Beispiel für utf8mb4-Sortierung in MySQL

Allgemeine utf8mb4-Sortierregeln in MySQL sind: u...

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

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

ElementUI-Komponente el-dropdown (Falle)

Auswählen und ändern: Klicken Sie, um den aktuell...

Die Position der Bildlaufleiste bleibt beim Scrollen der Vant-List-Komponente erhalten

Die Position der Bildlaufleiste bleibt beim Scrol...

Eine gute Möglichkeit, Ihre Designfähigkeiten zu verbessern

Sogenanntes Talent (linke und rechte Gehirnhälfte...

DOCTYPE-Element ausführliche Erklärung vollständige Version

1. Übersicht In diesem Artikel wird das DOCTYPE-E...

SQL-Abfrage für Benutzer, die an mindestens sieben aufeinanderfolgenden Tagen Bestellungen aufgegeben haben

Erstellen einer Tabelle Tabelle erstellen Bestell...

Detaillierte Erklärung des Grid-Layouts und des Flex-Layouts der Anzeige in CSS3

Das Gitterlayout weist einige Ähnlichkeiten mit d...

Zusammenfassung der Dateninteraktion zwischen Docker-Container und Host

Vorwort Beim Einsatz von Docker in einer Produkti...

Details zur Destrukturierungszuweisung in Javascript

Inhaltsverzeichnis 1. Array-Dekonstruktion 2. Obj...

So vermeiden Sie die Duplizierung von Daten beim Einfügen in einen MySql-Batch

Inhaltsverzeichnis Vorwort 1. Einfügen von ignore...

So implementieren Sie die Wiederverwendung von Logik mit der Vue3-Kompositions-API

Die Composition API implementiert Schritte zur Wi...

Vue.js implementiert das Neun-Raster-Bildanzeigemodul

Ich habe Vue.js verwendet, um ein Bildanzeigemodu...