Découvrir Vue.js 2

Communiquer grâce aux attributs

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Les attributs de balise vous permettent de dialoguer facilement avec un élément. Cela fonctionne aussi bien en lecture qu'en écriture.
05:16

Transcription

Je vais vouloir ici travailler sur la classe que j'ai à cet endroit-là, pour effectuer une modification de mon interface en fonction. Alors, en fonction de quoi ? En fonction de si j'ai un joueur ou pas. Alors, je vous explique un petit peu. Cet espace player, ici, soit, il va m'afficher un message. Et à ce moment-là j'ai un joueur, et donc j'affiche son nom. Soit il va m'afficher un formulaire, parce que je vais avoir besoin d'un joueur qui s'affiche. Donc j'ai besoin que l'utilisateur remplisse un formulaire pour mettre son nom, tout simplement. Ce qu'on va faire c'est que le welcome message, dans le concret, on va le laisser comme ça pour le moment, mais on mettra rien si il y a pas de joueur, parce que, en réalité, si il y a pas de joueur, on va tout simplement pas l'afficher. Ensuite, il va nous falloir un formulaire. Le mieux quand-même c'est de venir travailler d'abord sur des encapsulations. Donc je vais encapsuler le welcome message dans un span et puis je vais ensuite créer un petit formulaire. Un formulaire vraiment très classique, dans lequel je vais avoir simplement un bouton avec un name name, qui va être le nom du joueur. Ça pourrait être un name player, aussi, pourquoi pas, donc le name player. Et ensuite qu'est-ce que je vais mettre ? Je vais simplement lui mettre un petit placeholder avec « Entrez votre nom de joueur ». Je vais fermer ce champ de formulaire, et puis je vais rajouter un bouton. Ce bouton va me permettre plus tard de valider. Donc ce sera forcément un bouton de type submit. Et je vais mettre à l'intérieur « Jouer ». Donc, comme ça, on est bon, on a un formulaire. Maintenant ce formulaire, je vais avoir envie de l'afficher si j'ai pas de joueur, pour qu'il s'inscrive. Mais si j'ai déjà un joueur, je veux pas l'afficher. Comment je vais faire ? Je vais utiliser les attributs, c'est à dire l'attribut de classe, ici, en l'occurrence, mais vous allez pouvoir le faire avec quasiment tout, pour venir travailler sur des propriétés. Et pour faire ça, Vous allez utiliser une syntaxe assez particulière, qui va vous permettre de travailler sur les éléments. Et cette syntaxe c'est la syntaxe des attributs, v-bind. Alors, vous allez pouvoir de façon dynamique mettre à jour n'importe quelle propriété d'attribut, directement dans votre code source du composant, pour que ça se reflète dans l'interface. Ici, le problème c'est que je n'ai pas le droit d'utiliser comme ça la syntaxe moustache. C'est pas autorisé, on est obligés de passer par la modification d'attribut, et pour faire ça, vous êtes obligés d'utiliser cette syntaxe-là. v-bind. En fait, c'est bind sur vue. C'est vue qui nous le propose. Donc v tiret bind, deux-points class. Je vais agir sur la classe. Et ici, je vais lui donner un player class. Alors, le player class, ça doit être une propriété, obligatoirement, ce qui fait qu'on va devoir l'ajouter. this player class est égal. Si j'ai un player, on va lui dire que ce sera player, et si j'ai pas de player, on va lui dire alors attention ici, c'est un point d'interrogation, on va lui dire que c'est le player form. Comme ça, on va avoir deux possibilités. J'ai un joueur, ce sera player. J'ai pas de joueur, ce sera player form. Donc là, il est fort probable qu'en rechargeant la page, pour le moment, cet espace-là, ce soit player form, parce que je n'ai pas de joueur, pour le moment. Donc voyez qu'ici, on a bien reflété dans l'interface, via, ici, une propriété sur les attributs, une classe en fonction d'une condition. Mais on va aller un tout petit peu plus loin, parce que on veut que ça fonctionne. Alors, dans le concret, ça veut dire quoi ? Ça veut dire que cette phrase et cet emplacement ici, je veux pas l'afficher. On pourrait laisser une phrase, ici, pas de joueur pour bien voir que, effectivement, pour le moment, malheureusement, les deux s'affichent : pas de joueur et le formulaire. Moi, je vais vouloir jouer sur ça. On a une classe. On sait que .player, ici, ça existe. ça veut dire que .player, donc si on a .player, on a pas besoin du formulaire. Donc .player form display, ici, on va faire display, on va jouer en fait sur une propriété CSS, none. Et dans le cas contraire, si c'est le formulaire, donc on va avoir player form, qui va être ajouté directement à la div parente, dans ce cas-là, c'est le span qu'on doit pas montrer. Pouquoi ? Parce que le span, ici, on a pas besoin de le montrer. C'est le formulaire que l'on veut uniquement, si on affiche le player form. Et regardez. C'est génial. En travaillant avec les styles et en travaillant avec les attributs, sur les balises des attributs dynamiques, on va pouvoir très facilement modifier l'aspect de notre interface, et ça commence à devenir intéressant. On pourrait aller plus loin, évidemment, puisque maintenant qu'on a un player form, on pourrait se dire qu'effectivement ce player form on va venir le travailler au niveau du style. Bon. On ajoutera du style un petit peu plus tard. Là, ce qui était important pour moi de vous montrer c'est que on peut travailler très facilement ici sur les attributs. On a des propriétés qui nous le permettent. Et ça va nous aider à modifier l'interface en fonction d'une logique métier On sait qu'actuellement, si on a pas de joueur, faut afficher le formulaire, si on a un joueur, faut juste lui mettre la phrase. Et après, on pourra travailler carrément le style, pour avoir quelque chose de très puissant et de très propre, et une interface qui est entièrement dynamique.

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 !