Découvrir Vue.js 2

Gérer les styles

Testez gratuitement nos 1270 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Assimilez la gestion des styles avec Vue.js 2. Découvrez comment les prendre en main et apprenez à les utiliser.
04:11

Transcription

On va attaquer la partie style. La partie classe, style, tout ce qu'on peut faire pour décorer une interface dans Vue JS. Alors, il faut savoir qu'il y a énormément de possibilités. voilà, pour travailler sur une syntaxe object, array. On va pouvoir travailler aussi sur des styles qu'on va passer directement. Vous verrez qu'il y a beaucoup de possibilités. Malheureusement, vous verrez aussi que pas mal de choses que l'on a fait précédemment vont sauter. Oui, parce qu'on va mettre à jour, forcément. On va utiliser d'autres méthodes pour gérer ici par exemple les styles qu'on a à cet endroit-là. Et puis on va utiliser d'autres méthodes aussi pour cacher des éléments. Évidemment, il faut vous montrer les choses dans un premier temps pour que vous puissiez ensuite prendre pleine connaissance de ce qui est intéressant, pour améliorer encore l'impact du code. Alors, je vous parlais des styles de façon globale, C'est pas parce qu'on a des méthodes dans Vue JS qu'il faut pour autant se passer de librairies qui sont très intéressantes. Et je parle notamment des librairies du type Bootstrap. Ou Animate.css. Ça c'est des librairies super intéressantes. Si j'ai envie d'intégrer Bootstrap à mon projet, pas de problème, et je vous invite même à le faire. C'est vraiment hyper intéressant de se baser sur des librairies extérieures. Vue JS vous encourage à le faire. C'est un framework qui va gérer la vue, certes, mais qui est un framework qui peut fonctionner avec les autres. Et c'est exactement pour ça qu'il est fait, aussi. Pour pouvoir être mixé avec d'autres librairies. Alors, je vais simplement copier ici les petits liens qu'on a sur la page de Bootstrap, et je vais venir les ajouter à mon projet. Je vais enregistrer, et bien sur, ça va recompiler. Ça va redémarrer, et je vais me retrouver ici avec tous les styles. Donc là ça c'est bon, les styles sont reliés, vous voyez que ça a modifié un tout petit peu l'interface. Pas de grande chose non plus. Si vous voulez utiliser des librairies du type Animate.css, ce que je vous conseille vivement c'est ce qu'on a vu au début du cours. Alors je vais tuer ici l'exécution, et puis je vais simplement utiliser bower pour installer Animate.css. Bower c'est bien parce que ça vous installera les dernières versions des librairies. Donc on va faire un bower install animate.css Et là je vais vous parler d'un petit bémol. Quand vous voulez utiliser des librairies que vous avez ajoutées comme ça, par exemple par bower, vous ne devez pas les laisser à la racine. Voyez que si je regarde ici tout je projet j'ai le dossier bower components, et j'ai surtout un dossier static. En fait, si là vous lui donnez le chemin vers bower components, il comprendra pas, il ne trouvera pas votre script. Alors que, si vous utilisez le chemin vers static, là il va fonctionner et il va trouver. Alors, pour le faire, on va simplement préparer le chemin, et puis après on va déplacer les informations. Ici on va faire static, slash, ça va me donner du bower components, slash, ensuite ça va être animate.css. Faites très attention, parce que des fois, vous allez vous tromper dans le chemin, puis ça va pas fonctionner, c'est simplement parce qu'il y a une petite coquille dans ce que vous avez écrit. Et puis on va déplacer bower component, tout le dossier, directement dans static ; voilà. Comme ça on se retrouve bien avec animate css, on peut cliquer dessus avec la touche command sur un Mac, ou avec la touche Alt sur un PC, pour aller voir que, effectivement, on a bien la librairie qui s'est installé, on enregistre bien la page, et puis on va simplement relancer le serveur NPM avec run dev, pour voir que tout s'est bien passé. Alors, ensuite vous pouvez juste recharger votre page, vérifierez bien que ici vous aurez animate.css qui s'affiche, et maintenant vous avez une interface qui bénéficie de toutes les librairies qu'on a installé. Donc, les librairies qui font partie de Bootstrap. Alors, c'est bien parce que on a la dernière version de Bootstrap min.css. Et on a aussi Jquery, jquery 3.1.11 qui est fourni. Donc ça c'est bien, parce que vous allez avoir un jquery sous la main si vous avez des modifs d'interface à faire avec jquery, vous pouvez, il y a aucun problème avec ça. Bien au contraire, c'est vraiment des choses que vous pouvez faire, et que je vous encourage à faire. On va pas ne pas utiliser des outils qui sont géniaux sous prétexte qu'on est sur Vue.js. Bien au contraire, on va mixer les deux. Voilà pour la globalité. Pensez aussi que vous pouvez, dans index.html, ici, créer simplement une balise qui va s'appeler style, ou alors votre feuille de style à part, et venir créer des styles de façon globale pour toute l'application. Ça va marcher.

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 !