Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir Vue.js 2

Attribuer un template à une instance

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Une instance sans template est inutile. Voyez comment relier un template à une instance et comment s'en servir pour l'affichage.
04:35

Transcription

Il existe deux façons de gérer le template sur un composant. Vous l'avez vu en fait, en réalité. C'est soit l'utilisation de cette balise-là, la balise template. Quand vous allez la déclarer à l'intérieur d'un composant, ça va être automatique c'est-à-dire qu'on va avoir le template qui va être ajouté et compilé automatiquement si on utilise cette balise-là. Au même titre que la balise script, au même titre que la balise style. Tout va de pair. Qu'est-ce qui va se passer du coup si je ne le mets pas ? Si je ne le mets pas il n'y aura pas de template. Mais j'ai une deuxième possibilité pour définir un template. Si vous regardez dans App.vue, vous verrez qu'ici on utilise également template puis si vous regardez encore dans main.js, vous verrez que là il y a une déclaration. Template : Ça c'est la deuxième possibilité. Soit vous utilisez la balise template, soit vous utilisez le paramètre template dans l'objet que vous êtes en train de déclarer. Alors concrètement ça veut dire quoi ? Ça veut dire qu'ici je pourrais tout simplement déclarer quelque chose. Il faut faire très attention car vous êtes obligé d'avoir une div qui va entourer les informations. Vous ne pourrez pas avoir d'éléments à l'intérieur de votre template sans avoir une div qui entoure. Je vous conseille de créer une div avec une class et pourquoi pas lui mettre la même class que votre composant. Ça c'est uniquement pour pouvoir se repérer. Si je fais ça comme ça et qu'à cet endroit-là, je tape Espace de jeu et que j'enregistre, je retourne sur mon navigateur et la compilation a été effectuée et on voit bien maintenant à cet endroit-là que j'ai une div qui a une class game avec marqué Espace de jeu dedans. Qu'est-ce qui se serait passé si je n'avais pas mis de div entourante. Imaginons que je l'enlève cette div. Je vais simplement mettre Espace de jeu et je vais retourner sur ma compilation. Alors ici on me dit non , ce n'est pas possible, ça ne fonctionne pas tout simplement parce que tu es obligé d'avoir à cet endroit-là, avant même d'avoir de l'information, quelque chose qui entoure, un élément qui va entourer. C'est obligatoire. Donc ça gardez-le bien en tête, vous êtes obligé d'avoir un élément qui entoure. Maintenant imaginons que cette partie-là j'ai envie de la mettre, non pas ici dans une balise template, mais j'ai envie de la mettre dans un élément, dans une propriété de mon élément ici qui s'appelera template. Donc c'est un paramètre que vous allez utiliser. Template avec un e voilà comme ça. Template et on va mettre cette partie-là. Le gros souci qu'on va avoir c'est que comme vous le voyez, là on ne peut pas forcément utiliser les sauts de ligne eccetera. Alors il y a quand même une technique c'est d'utiliser cette syntaxe-là. La syntaxe avec les petits guillemets penchés qui va vous permettre de travailler sur de la template sur plusieurs lignes. Si vous ne faites pas ça, vous n'aurez pas le droit d'utiliser des templates sur plusieurs lignes. Vous devrez utiliser ce caractère si vous avez envie de faire des sauts de ligne c'est obligatoire. vous ne pourrez pas sinon. Attention par contre, même problème. Si ici j'ai envie de m'amuser à avoir juste du texte, j'aurais une erreur de compilation parce que je n'ai pas le droit d'avoir cette information-là. Le seul truc c'est qu'ici vous n'aurez pas une erreur à proprement parler directement qui s'affichera là, par contre on vous le dira ici dans la console. Vous voyez, c'est la différence entre les deux. Quand j'utilise template, je vais avoir des erreurs qui vont être un peu parlantes et si j'utilise le paramètre template, pour le coup ici je n'aurais pas d'erreur à proprement parler dans mon interface mais j'aurais une erreur quand même en console. Dans tous les cas, vous remarquerez qu'il y a une erreur. Après c'est vraiment à vous de voir ce que vous voulez faire, ça s'apparente un peu à ce que l'on fait en react c'est-à-dire venir définir le template directement. Personnellement, je préfère utiliser largement l'élément template au-dessus, c'est un peu plus clair et puis au moins vous travaillez avec de la coloration syntaxique ce qui n'est pas le cas quand on définit un paramètre en-dessous. Du coup, ici ce sera quand même un petit peu plus clair et vous allez travailler sur du vrai html propre avec coloration. Il y a quand même un vrai attrait intéressant à utiliser cette technique-là. Préférez cette technique aux paramètres que vous allez utiliser dans l'objet. C'est quand même beaucoup plus simple. Voilà comment on définit des templates. Soit on va utiliser la propriété template, mais à ce moment-là, on utilisera le caractère accentué donc ici qui est penché, soit on utilisera la balise template et à ce moment-là, on aura quelque chose d'un petit peu plus clair. Je vous conseille la balise template qui est beaucoup plus intéressante. De temps en temps, vous verrez que les erreurs restent, c'est un peu embêtant. La seule manière de les effacer et de bien voir si tout est ok, c'est de recharger la page, à ce moment-là vous aurez vraiment les informations.

Découvrir Vue.js 2

Animez et rendez réactive la vue d’une application web avec le framework Vue.js. Mettez en place les interfaces web de demain​ ​et utilisez les librairies externes de votre choix.

2h25 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Vue.js Vue.js 2.1
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :14 févr. 2017
Durée :2h25 (44 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !