Découvrir Vue.js 2

Utiliser des objets pour le style

Testez gratuitement nos 1266 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Les styles peuvent être gérés à l'aide d'objets. Non seulement votre gestion des styles sera plus fine, mais cela vous permettra également de regrouper les règles.
04:25

Transcription

Alors, on peut aussi utiliser des objets de style, qui vont donc refléter réellement tout un objet, et donc afficher des propriétés. Ça veut donc dire que, dans le concret, on pourrait tout à fait se passer de la référence qui se trouve ici, et on pourrait mettre à jour uniquement les propriétés d'un objet de style, qui mettrait donc à jour, forcément, l'objet sur lequel on va les appliquer. Pour faire ça, vous allez d'abord devoir commencer par créer un objet de style. Cet objet de style, il va être très simple. On va l'appeler round style, et puis ça va être un simple objet, comme ça, qui va avoir deux propriétés importantes, c'est à dire ici, height, width, et margin. Alors, le mieux c'est même de mettre les trois propriétés, c'est à dire height, width, et puis ensuite margin. Donc là on va mettre la height, la width. Voilà, on va les appliquer comme ça. Faites attention, ça c'est de la string. Height, width, et il nous manque bien évidemment margin. Vous pouvez aussi les supprimer du style CSS qui se trouve en bas, parce que ça sert à rien, dans le sens où ça va être défini ici, donc répercuté, donc aucun problème. Donc ça, ça va être notre style. Maintenant, on va devoir l'appliquer. On l'à déjà vu, comment on applique, on va simplement faire deux-points ici, style. En fait, c'est exactement la même chose que ce qu'on a fait sur le player, faire deux-points class, c'était pour appliquer des classes. Et regardez, dans la documentation. En fait, ici, on vient appliquer des classes. Si on descend un tout petit peu au niveau des styles, on voit que il suffit de prendre v bind style, donc ça va être deux-points style tout simplement. Et on va venir les appliquer. Donc c'est toujours pareil. On va utiliser les propriétés de la même manière. Donc ça va être ici égal et puis on va pouvoir relier un objet de style, et cet objet de style c'est roundStyle, qu'on a ici. Alors, le roundStyle qu'on a là, pour le moment si on le laisse comme ça, ça va pas avoir de grandes modifications, parce que, pour le moment, on vient déjà agir sur l'objet. Ce qu'on peut voir c'est que, au chargement, on a bien les bonnes propriétés qui viennent s'afficher sur le span. Donc ça, pas de problème, on a bien les bonnes propriétés ici, on peut les, voilà. On va l'introspecter, et vous voyez qu'effectivement, le style vient d'être ajouté par l'objet de style. Maintenant, cet objet de style, il est intéressant, mais il va falloir quand-même qu'on le fasse évoluer. Alors, comment on va le faire évoluer ? Voyez qu'ici, on a un style qui se trouve à cet endroit-là, et on s'amusait ici à récupérer la référence de l'élément, etc. Donc on va supprimer cette référence, et ici on va aussi la supprimer, à cet endroit-là. Ça ne sert à rien d'utiliser la référence, puisque on peut utiliser les propriétés. La constitution qu'on a ici, elle est bonne, il faut la conserver. Par contre, il va falloir qu'on modifie la façon qu'on a de gérer le style. On va gérer le style par this.roundStyle .height, this.roundStyle.width, et enfin, ici, this.roundStyle.margin. Donc on va venir modifier ces informations-là, ça c'est certain, par contre on va les modifier à chaque fois avec la même chose. C'est à dire, on va modifier l'objet de style, et non plus modifier l'élément à proprement parler. Ce qui est intéressant pour nous c'est que on aura possibilité, pourquoi pas, de créer plusieurs éléments à un moment, qui comporteront le même style. Et là, quand on va cliquer, vous allez voir que ça va être la même chose, la répercussion va être exactement la même, sans aucun problème, sauf que ce qui va être modifié, regardez, c'est directement les styles que vous avez ici, et non plus les styles sur l'élément en modifiant le dom, là on va déléguer cette modification-là, qui va être automatisée au travers de Vue. Donc là, c'est vraiment super pour nous, on a un objet propre, que l'on peut modifier un peu partout, qui est appliqué via un bind style sur notre span. Et on pourrait imaginer plusieurs span qui existent. Donc pourquoi pas en imaginer cinq-six, et venir en rajouter à un autre moment dans l'interface avec cet objet de style, sans aucun problème. Voyez que c'est très facile. Il y a pas besoin de faire des millions de choses. Vous avez vu, c'est important d'avoir Vue, qui a des références, qu'on peut travailler avec. Mais essayez d'aller toujours au plus simple. Vous savez que vous pouvez créer des objets de style venir les appliquer sur un élément, et les modifier au fur et à mesure, préférez utiliser largement cette information-là, et cette façon de faire, qui est beaucoup plus simple.

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 !