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 Erklärung des MySQL-Datenbankparadigmas

Vorwort: Ich habe oft von Datenbankparadigmen geh...

Beispielcode zur Implementierung der Großbildanpassung auf dem PC mit vue+px2rem (REM-Anpassung)

Konfiguration Vorwort Projektaufbau: basierend au...

Vue verwendet OSS zum Hochladen von Bildern oder Anhängen

Verwenden Sie OSS, um Bilder oder Anhänge in ein ...

React Native realisiert den Auf- und Ab-Pull-Effekt der Überwachungsgeste

React Native implementiert die Überwachungsgeste ...

Detaillierte Erläuterung des Dockerfiles zum Erstellen eines benutzerdefinierten Docker-Images und Vergleich der CMD- und ENTRYPOINT-Anweisungen

1. Übersicht Es gibt drei Möglichkeiten, ein Dock...

Alibaba Cloud Ubuntu 16.04 baut IPSec-Dienst auf

Einführung in IPSec IPSec (Internet Protocol Secu...

MySQL-Paging-Abfragemethode für Millionen von Datenmengen und ihre Optimierungsvorschläge

Die SQL-Optimierung von Datenbanken ist ein häufi...

Zusammenfassung mehrerer Methoden zur Implementierung der vertikalen Zentrierung mit CSS

Im Front-End-Layoutprozess ist es relativ einfach...

Vue verwendet WebSocket, um die Chat-Funktion zu simulieren

Der Effekt zeigt, dass sich zwei Browser gegensei...

Lösen Sie das Problem der Verwendung von weniger in Vue

1. Installieren Sie weniger Abhängigkeiten: npm i...

Vollständige Schritte zum Erstellen eines Passwortgenerators mit Node.js

Inhaltsverzeichnis 1. Vorbereitung 2. Befehlszeil...

Erfahren Sie, wie Sie Nginx schnell in CentOS7 installieren

Inhaltsverzeichnis 1. Übersicht 2. Laden Sie das ...

Vue+axios-Beispielcode zum Hochladen von Bildern und Erkennen von Gesichtern

Inhaltsverzeichnis Axios-Anfrage Qs-Verarbeitungs...

Mit wie vielen Pixeln sollte eine Webseite gestaltet werden?

Viele Webdesigner sind beim Entwurf des Webseitenl...

So importieren Sie CSS-Stile in externe HTML-Stylesheets

Der Link-In-Stil besteht darin, alle Stile in ein...