Einführung in verschiedene Methoden zum Definieren von Komponentenvorlagen in Vue.js

Vue.js verwendet eine HTML-basierte Vorlagensyntax, die es Entwicklern ermöglicht, das DOM deklarativ an die Daten der zugrunde liegenden Vue-Instanz zu binden. Alle Vue.js-Vorlagen sind legales HTML und können von Browsern und HTML-Parsern analysiert werden, die der Spezifikation folgen.

Es gibt viele Optionen zum Definieren von Komponentenvorlagen in Vue. Meiner Meinung nach gibt es mindestens sieben verschiedene Möglichkeiten:

• Strings

• Template-Literale

• Machen Sie sich mit jeder Methode vertraut und besprechen Sie deren Vor- und Nachteile, damit Sie wissen, welche Methode in der jeweiligen Situation am besten geeignet ist.

• 1. String

• Standardmäßig wird die Vorlage als String in der JS-Datei definiert. Ich denke, wir sind uns alle einig, dass Vorlagen in Strings sehr schwer zu verstehen sind. Abgesehen von der breiten Browserunterstützung gibt es an dieser Methode nichts Besonderes.

Vue.component('my-checkbox', {
	template: `<div class="checkbox-wrapper" @click="check">
	<div :class="{ checkbox: true, checked: checked }">
	</div><div class="title">{{ title }}</div></div>`,
	data() {
		return { checked: false, title: &#39;Check me&#39; }
	},
	methods: {
		check() { this.checked = !this.checked; }
	}
});

• 2. Vorlagenliterale
ES6-Vorlagenliterale („Backticks“) ermöglichen die Definition von Vorlagen über mehrere Zeilen, was in regulären Javascript-Strings nicht möglich ist. Während Sie aus Sicherheitsgründen wahrscheinlich immer noch auf ES5 umsteigen sollten, unterstützen viele neue Browser diese Befehle mittlerweile und sind einfacher zu lesen.

Dieser Ansatz ist jedoch nicht perfekt; ich habe festgestellt, dass die meisten IDEs Sie immer noch mit Syntaxhervorhebung, Tabulatoren, Zeilenumbrüchen usw. belasten.

Vue.component('my-checkbox', {
    template: ` < div class = "checkbox-wrapper"@click = "check" > 
    <div: class = "{ checkbox: true, checked: checked }" ></div>
							<div class="title">{{ title }}</div ></div>`,
	data() {
		return { checked: false, title: &#39;Check me&#39; }
	},
	methods: {
		check() { this.checked = !this.checked; }
	}
});/

3, X-Templates

Mit dieser Methode wird Ihre Vorlage in einem Skript-Tag in der Datei index.html definiert. Skript-Tags werden mit dem Text /x-template getaggt und durch die ID in der Komponentendefinition referenziert.

Dieser Ansatz gefällt mir, er ermöglicht es Ihnen, HTML mit korrektem HTML-Markup zu schreiben, aber der Nachteil ist, dass er die Vorlage vom Rest der Komponentendefinition trennt.

Vue.component('my-checkbox', {
	template: '#checkbox-template',
	data() {
		return { checked: false, title: 'Check me' }
	},
	methods: {
		check() { this.checked = !this.checked; }
	}
});

<script type="text/x-template" id="checkbox-template">
	<div class="checkbox-wrapper" @click="check">
		<div :class="{ checkbox: true, checked: checked }"></div>
		<div class="title">{{ title }}</div>
	</div>
</script>

4. Inline-Vorlagen

Durch Hinzufügen des Inline-Template-Attributs zu einer Komponente können Sie Vue angeben, dass der interne Inhalt ihre Vorlage ist, anstatt ihn als verteilten Inhalt zu behandeln.

Es hat die gleichen Nachteile wie x-templates, aber ein Vorteil besteht darin, dass der Inhalt in der HTML-Vorlage an der richtigen Position ist, sodass er beim Laden der Seite gerendert werden kann, anstatt zu warten, bis Javascript verfügbar ist laufen.

Vue.component('my-checkbox', {
	data() {
		return { checked: false, title: 'Check me' }
	},
	methods: {
		check() { this.checked = !this.checked; }
	}
});

<my-checkbox inline-template>
	<div class="checkbox-wrapper" @click="check">
		<div :class="{ checkbox: true, checked: checked }"></div>
		<div class="title">{{ title }}</div>
	</div>
</my-checkbox>

5. Rendering-Funktion

Die Rendering-Funktion erfordert, dass Sie die Vorlage als Javascript-Objekt definieren. Sie sind eindeutig die ausführlichsten und abstraktesten Vorlagenoptionen. Dies hat jedoch den Vorteil, dass die Vorlage näher am Compiler liegt und Ihnen den Zugriff auf die gesamte Javascript-Funktionalität statt auf die von der Direktive bereitgestellte Teilmenge ermöglicht.

Vue.component('my-checkbox', {
	data() {
		return { checked: false, title: 'Check me' }
	},
	methods: {
		check() { this.checked = !this.checked; }
	},
	render(createElement) {
		return createElement(
			'div',
		  	{
					attrs: {
						'class': 'checkbox-wrapper'
					},
					on: {
						click: this.check
					}
		  	},
		  	[
		    	createElement(
	      		'div',
	      		{
	        		'class': {
	        			checkbox: true,
	        			checked: this.checked
        			}
	      		}
		    	),
		    	createElement(
	      		'div',
	      		{
	        		attrs: {
	          		'class': 'title'
	        		}
	      		},
	      		[ this.title ]
		    	)
		  	]
		);
	}
});

6. JSX

Die umstrittenste Vorlagenoption in Vue ist JSX. Einige Entwickler halten JSX für hässlich, unintuitiv und einen Verrat am Geist von Vue. JSX erfordert, dass Sie es zuerst konvertieren, da Browser es nicht lesen können. Wenn Sie jedoch Rendering-Funktionen verwenden müssen, ist JSX sicherlich eine weniger abstrakte Möglichkeit, Vorlagen zu definieren.

Vue.component('my-checkbox', {
	data() {
		return { checked: false, title: 'Check me' }
	},
	methods: {
		check() { this.checked = !this.checked; }
	},
	render() {
		return <div class="checkbox-wrapper" onClick={ this.check }>
		         <div class={{ checkbox: true, checked: this.checked }}></div>
		         <div class="title">{ this.title }</div>
		       </div>
	}
});

7. Einzeldateikomponenten Solange Sie mit den Build-Tools in Ihrem Setup vertraut sind, sind Einzeldateikomponenten die Königin der Vorlagenoptionen. Sie bieten das Beste aus beiden Welten: Sie ermöglichen das Schreiben von Markups und behalten gleichzeitig alle Komponentendefinitionen in einer einzigen Datei bei.

Sie erfordern eine Transposition und einige IDEs unterstützen keine Syntaxhervorhebung für diesen Dateityp, aber ansonsten sind sie kaum zu übertreffen.

<template>
  <div class="checkbox-wrapper" @click="check">
    <div :class="{ checkbox: true, checked: checked }"></div>
    <div class="title">{{ title }}</div>
  </div>
</template>
<script>
  export default {
    data() {
      return { checked: false, title: &#39;Check me&#39; }
    },
    methods: {
      check() { this.checked = !this.checked; }
    }
  }
</script>

Sie könnten argumentieren, dass es mehr Möglichkeiten zur Vorlagendefinition gibt, da Sie Vorlagenpräprozessoren wie Pug vs. SFCs verwenden können. Welcher ist der Beste?

Natürlich gibt es keinen perfekten Weg und jeder sollte anhand Ihres Anwendungsfalls beurteilt werden. Ich denke, die besten Entwickler erkennen alle Möglichkeiten und machen jedem Entwickler ein Werkzeug in seinem Vue.js-Werkzeuggürtel!

Englische Originaladresse: https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates/

Verwandte Empfehlungen:

Zusammenfassung der Fragen zum Front-End-Vue-Interview 2020 (im Anhang). ) Antwort)

vue-Tutorial-Empfehlung: Die neuesten 5 vue.js-Video-Tutorial-Auswahlen im Jahr 2020

Weitere Programmierkenntnisse finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonEinführung in verschiedene Methoden zum Definieren von Komponentenvorlagen in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!