Découvrir Vue.js 2

Insérer du HTML

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Lors de la manipulation de données, insérer du code HTML à certains endroits peut s'avérer utile. Grâce à Vue.js, vous pourrez insérer du code HTML très simplement.
04:57

Transcription

De temps en temps, il va vous arriver de vouloir exploiter du HTML dans vos templates, mais depuis la définition de votre composant. Et alors là, vous allez voir, si vous savez pas faire, ça risque d'être compliqué. On va voir ça ensemble. Alors, quel est le cas, par exemple, où je vais utiliser du HTML ? Imaginons qu'ici mon Bonjour avec le nom du joueur, j'ai envie de mettre le nom du joueur de côté, dans un élément HTML pourquoi pas, parce que je sais que plus tard, je vais en avoir besoin, je vais avoir besoin de travailler dessus. Alors, ça veut dire, du coup, je vais référencer pourquoi pas un span, comme ça, avec une classe qui va être la classe player, je vais fermer mon span, et puis ici, je vais fermer totalement le span, à la fin, et je vais enregistrer ça. Et je vais me dire OK, c'est bon, c'est pas grave, c'est du HTML. Quand je vais lui demander ici de le cracher, il va me cracher du HTML. Eh bien, non. Il va pas cracher de HTML du tout. Regardez, on va mettre un nom de joueur, Julien, on va enregistrer, et effectivement, qu'est-ce qui se passe ? Lui il est bête et méchant, il vous envoie tout de suite l'information mais c'est pas du tout du HTML. En fait, il va vous le mettre à l'écran tel que vous l'avez écrit. Ça c'est un petit peu embêtant. On va voir au fur et à mesure comment faire. D'abord, première chose, quand vous devez traiter du HTML comme ça à l'intérieur de votre code, je vous conseille très fortement d'utiliser une autre syntaxe, qui est beaucoup plus lisible. Je vous montre. Vous allez ouvrir, comme ça, avec une apostrophe, et puis vous allez fermer derrière avec une apostrophe aussi, et vous n'utilisez plus les concaténations un petit peu bizarres de cette manière, vous allez plutôt utiliser cette syntaxe-là pour aller chercher des variables, regardez. Vous allez en fait entourer avec des accolades, et commencer par un dollar à chaque fois que vous avez une variable. Ça, ça s'utilise très très bien en ES6, et vous allez pouvoir facilement du coup appliquer de la template HTML. Ce qui malheureusement, je suis désolé pour vous, ne changera pas le fait que ça ne s'affiche toujours pas comme ça devrait s'afficher Vous inquiétez pas, on va y venir. En tout cas, gardez bien en tête cette syntaxe-là, qui est extrêmement intéressante pour gagner en clarté dans le code. Quand vous avez du HTML à écrire à l'intérieur de votre composant, utilisez ça plutôt que de faire des concaténations un peu bizarres. Puis en plus, vous pourrez écrire du full HTML dedans, c'est propre, et ça se lit très bien. Maintenant j'ai envie de l'afficher. Alors, on va pas utiliser l'interpolation classique, celle-ci, là, avec les moustaches, parce que quand vous utilisez ça, lui il est bête et méchant, il prend ce que vous avez écrit, et puis il l'injecte ici, point-barre. Nous, ce qu'on a envie de faire c'est avoir du vrai HTML. Et pour ça, vous devez obligatoirement utiliser une directive, qui est la directive v html. Et vous devrez, à l'intérieur, lui donner le nom de la variable. En l'occurrence, pour nous, le welcome message. Si vous ne faites pas ça, vous ne pourrez pas avoir votre code html à l'intérieur, parce que il partira du principe que c'est pas sécurisé, donc quand vous lui mettez une directive HTML, ce que vous lui donnez à l'intérieur, lui il va le passer dans un petit compilateur, il va le vérifier, comme ça, pas d'erreur possible. À ce moment-là, vous allez retrouver effectivement votre élément. Et vous avez bien votre span player, avec le nom du joueur à l'intérieur. Concrètement, votre HTML va bien être représenté dans la page. Ce qui n'est pas le cas si vous n'utilisez pas v html. Alors, il y a quelque chose d'autre d'important aussi à garder à l'esprit, faites attention à ce que vous injectez. Quand vous utilisez v html, soyez sûrs de ce que vous injectez. Ne faites pas ça de façon dynamique, ne donnez pas la main à la personne pour pouvoir injecter tout et n'importe quoi. C'est important pour garder un code sécurisé. En ayant fait ça, on est tranquilles. Et d'ailleurs, si vous retirez le player, il y aura toujours l'information dans la page, même si elle ne s'affiche pas, elle est quand-même là, et le pas de joueur est quand-même affiché et récupéré. Donc, dans v html on peut passer aussi bien du HTML que des chaines de caractères complètement classiques. Il y a aucun problème avec ça. Donc, utilisez vraiment v html, qui vous permettra d'injecter à l'intérieur. Attention cependant quand vous utilisez cette directive, le contenu de la directive, donc c'est à dire le welcome message, va être injecté à l'intérieur de l'élément sur laquelle vous l'avez mis. Donc dans span, ici, si vous avez des imbrications d'éléments, pensez bien à placer cette directive sur l'élément qui doit recevoir l'information. Sinon, ça marchera pas, et ça va écraser l'intérieur. Si, par exemple ici, j'ai de l'information, et que j'utilise ça, malheureusement, voyez, ça va ici m'écraser l'information. C'est à dire, je vais plus du tout avoir la bonne information, ça va carrément être écrasé. Donc faites très attention à ça, c'est important. Vous remarquez quelque chose également, c'est qu'ici, cette partie-là, elle est plus cachée. Parce qu'on a modifié le v hide. Vous pouvez tout à fait avoir plusieurs directives qui se suivent, c'est absolument autorisé, et c'est même préconisé de créer ces petites directives, et d'utiliser celles qui sont déjà fournies pour faire ce que vous avez besoin de faire. Donc, n'hésitez pas, on a utilisé plusieurs. Elles vont se combiner les unes les autres sans aucun souci.

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
Date de parution :14 févr. 2017

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 !