Introduction à plusieurs méthodes de définition de modèles de composants dans Vue.js

Vue.js utilise une syntaxe de modèle basée sur HTML qui permet aux développeurs de lier de manière déclarative le DOM aux données de l'instance Vue sous-jacente. Tous les modèles Vue.js sont du HTML légal et peuvent être analysés par les navigateurs et les analyseurs HTML qui suivent la spécification.

Il existe de nombreuses options pour définir des modèles de composants dans Vue. Il me semble qu'il existe au moins sept manières différentes :

• String

• Modèle littéral

• Composant d'une seule page

• Dans cet article, nous passerons en revue des exemples de chaque approche et discuterons de leurs avantages et inconvénients afin que vous sachiez quoi faire. faire en particulier Quelle méthode est la meilleure à utiliser dans les circonstances.

• 1. Chaîne

• Par défaut, le modèle sera défini comme une chaîne dans le fichier JS. Je pense que nous pouvons tous convenir que les modèles en chaînes sont très difficiles à comprendre. Il n'y a rien de spécial dans cette méthode autre que la large prise en charge du navigateur.

  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. Littéraux de modèles

Les littéraux de modèles ES6 ("backticks") vous permettent de définir des modèles sur plusieurs lignes, ce qui Cela ne peut pas être fait avec des chaînes Javascript classiques. Bien que vous devriez probablement toujours convertir vers ES5 par mesure de sécurité, de nombreux nouveaux navigateurs prennent désormais en charge ces commandes et sont plus faciles à lire.
Cette approche n'est cependant pas parfaite ; j'ai constaté que la plupart des IDE vous rendent toujours malheureux avec la coloration syntaxique, les tabulations, les sauts de ligne, etc.

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. Les balises de script sont marquées par le texte /x-template et référencées par id dans la définition du composant. J'aime cette approche, elle permet d'écrire du HTML avec le balisage HTML correct, mais l'inconvénient est qu'elle sépare le modèle du reste de la définition du composant.

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

rrree

4. Modèle en ligne

En ajoutant l'attribut inline-template au composant, vous pouvez indiquer à Vue que le contenu interne est son modèle, plutôt que de le considérer comme un contenu distribué.

Il présente les mêmes inconvénients que les modèles X, mais un avantage est le positionnement correct du contenu dans le HTML. modèle, donc peut être rendu lorsque la page se charge au lieu d'attendre que Javascript soit exécuté.

<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>

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

5. Fonction de rendu

Exigences de la fonction de rendu Vous définissez des modèles en tant qu'objets Javascript. Ce sont clairement les options de modèle les plus verbeuses et les plus abstraites.

Cependant, l'avantage est que le modèle est plus proche du compilateur et vous permet d'accéder à l'intégralité des fonctionnalités Javascript plutôt qu'au sous-ensemble fourni par la directive.

<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>

6. JSX

L'option de modèle la plus controversée dans Vue est JSX. Certains développeurs considèrent JSX laid, peu intuitif et une trahison de l'esprit de Vue.

JSX vous oblige à le convertir d'abord car les navigateurs ne peuvent pas le lire. Cependant, si vous devez utiliser des fonctions de rendu, JSX est certainement une manière moins abstraite de définir des modèles. 7. Composants de fichier unique

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 ]
		    	)
		  	]
		);
	}
});

. Ils apportent le meilleur des deux mondes : vous permettant d'écrire du balisage tout en conservant toutes les définitions de composants dans un seul fichier. Ils nécessitent une transposition et certains IDE ne prennent pas en charge la coloration syntaxique pour ce type de fichier, mais sinon, il est difficile de les battre.

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>
	}
});

Vous pourriez affirmer qu'il existe plus de possibilités de définition de modèles puisque vous pouvez utiliser des préprocesseurs de modèles comme Pug vs. SFC

Lequel est le meilleur ?

Bien sûr, il n'y a pas de méthode parfaite et chacune doit être jugée en fonction de votre cas d'utilisation. Je pense que les meilleurs développeurs réalisent toutes les possibilités et font de chaque développeur un outil dans leur ceinture d'outils Vue.js !

Adresse originale en anglais : https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates/

Recommandations associées :

Un résumé des questions d'entretien Front-end Vue en 2020 (avec réponses)

Recommandation du tutoriel Vue : la dernière vidéo 5 vue.js tutoriels sélectionnés en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter :

Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!