Découvrir Vue.js 2

Employer les classes CSS

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Dans cette vidéo, vous apprendrez à ajouter ou à supprimer des classes selon les besoins. Tirez également parti des styles CSS.
04:54

Transcription

Avec VueJS, on a possibilité d'utiliser les classes. Alors, ces classes, comment on va les utiliser ? Avec v-bind. Si vous vous souvenez de ce que je vous ai dit, logiquement on va pouvoir juste faire du coup : class. On a pas besoin d'utiliser v-bind. Le binding, il est automatique dès qu'on fait : . Uniquement avec v-bind, attention. Donc là on va pouvoir faire : class, et puis ajouter une classe si on a quelque chose qui se déclenche. Comment est-ce qu'on pourrait faire ça ? On pourrait tout simplement se prévoir ici une petite classe au niveau de notre player, ici qui serait la classe hide. Et, en plus, on a pas besoin de l'utiliser. Pourquoi ? Parce que hide, ça fait partie de bootstrap. Maintenant on l'a. Donc on pourrait simplement appliquer cette classe au cas où on ait besoin effectivement de le faire, et donc de travailler sur quelque chose qu'on doit cacher. Alors vous vous souvenez, regardez, on avait créé ça : v hide avec toute une méthode, avec une directive, etc. Je vous propose quelque chose, c'est qu'on efface tout ça. Alors, vous savez quoi, on va même carrément tout effacer. Voilà, toutes les directives. Vous pouvez effacer la directive de bordure, effacer aussi la directive de hide sur le span, effacer la directive de hide sur le form, et on va travailler avec une classe. Ce sera beaucoup plus simple et beaucoup plus sympa. Ce que l'on va devoir faire, par contre, ça va quand-même être de vérifier si on doit ou pas utiliser la méthode. Donc là, comment on va faire ? Simplement, on sait que c'est player. Vous vous souvenez, player maintenant c'est quelque chose de dynamique. On sait que player on va pouvoir l'utiliser pour afficher ou pour cacher quelque chose, puisque il se met à jour. Comme il se met à jour, regardez comment on utilise les classes. On va simplement faire ça : bind, comme ça, on va chercher cette partie-là, on fait : class, on sait que on doit faire un hide, si jamais ici on a un player. Alors là, en l'occurrence, on doit pas le cacher, on doit le montrer, donc ça va être, si il y a pas de player, effectivement - enfin, pardon, on le hide si il y a pas de player, d'accord. Si il y a un player, on le hide pas. Donc ce sera affiché. Dans le cas de notre formulaire en dessous, ça va être le contraire. Ça va être hide s'il y a un player. Et là on est bons. Donc concrètement en faisant ça, on vient de réduire d'abord le code, c'est à dire que on est passé de plusieurs lignes, avec toute une directive pour gérer ça à juste une petite ligne, qui nous permet de cacher ou de faire apparaitre. Faites attention, quand-même, parce que là on a un petit problème avec le welcome message, c'est simplement la petite virgule qu'on avait mise, voilà. Vous voyez que c'est bien parce que l'interface nous donne des informations. Alors, qu'est-ce qui se passe, maintenant ? On va aller regarder. Ici, le bonjour nous dit que la classe hide, elle est bien appliquée, par contre, il ne la trouve pas. Alors, il la trouve pas, on va aller voir dans la documentation de bootstrap. On va chercher le hide, ici. Alors, il trouve pas le hide. Il l'ont certainement renommé dans le Bootstrap 4. Alors, là, pour le coup, je vous avoue que je suis pas complètement à même avec Bootstrap 4, donc il va falloir qu'on regarde un petit peu dans la documentation. Mais bon, c'est un petit peu notre lot à tous, on fait toujours ça. Au niveau du content, très certainement, on va pouvoir trouver, voilà. C'est du hidden, voyez, c'est - c'est un attribut, maintenant ils utilisent l'attribut hidden Bon, un petit peu plus compliqué. Ce qu'on va faire nous, c'est que simplement, on va se créer une petite classe hide, ici, on va pas s'embêter, et ça va simplement faire un display none si c'est hide, et ce sera largement suffisant pour nous. Donc là regardez, effectivement, si je met un nom de joueur, c'est, ça se cache ou ça se cache pas. Voyez qu'il va travailler sur la classe, automatiquement, en fonction de ce qu'on est en train de faire. Très très très puissant, très facile à utiliser. Voyez que c'est plus intéressant d'utiliser un pivot sur les classes que d'utiliser, forcément, toute une logique avec des directives. Il y a pas besoin. Dans les cas un peu simples, comme ça, autant utiliser le pivot de classe. Donc concrètement, je vous récapitule le fonctionnement, on utilise le nom d'une classe qu'on va appliquer, et derrière c'est la condition pour pouvoir l'appliquer. Extrêmement simple, extrêmement facile. Ça vous pouvez l'appliquer à tout et n'importe quoi, et ça devient quelque chose de très sympa. Alors, si vous voulez qu'on améliore un petit peu aussi, on pourrait améliorer le formulaire. Ça je vais vous laisser le faire. Regardez un petit peu dans la documentation de Bootstrap comment faire du style sur les formulaires. Il y a une section sur les formulaires, « Forms », qui vous permettra de savoir comment améliorer un petit peu tout ça. Mais on pourrait avoir des styles un petit peu plus propres sur le formulaire. Ce n'est que de l'interface, des petites choses en plus, mais ça vous permet d'avoir quelques exemples et de pouvoir travailler un petit peu plus dessus.

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 !