Découvrir Vue.js 2

Simplifier le code avec les attributs

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
La directive vous permet d'utiliser moins de code. Vous aurez également plus de liberté d'action sur les éléments.
04:32

Transcription

On va parler des directives. Alors, des directives, il en existe déjà, directement implémentées dans Vue js. Et ça, c'est une directive. v tiret bind. Bien sûr, on est venu agir sur un élément d'attribut, pour l'élément div, mais on pourrait tout à fait implémenter nos propres directives, pour pouvoir travailler sur les éléments. Pour faire ça, d'abord il va falloir trouver une logique métier à implémenter, et puis évidemment ensuite choisir le nom de notre directive. Nous ce qu'on va faire, pour l'exemple, ça va être une première directive qui va nous permettre de modifier la bordure d'un élément. Pour ça, on va créer, avec v-, un nom de directive. Border, par exemple. Et là, le nom, c'est vous qui le choisissez. Et puis ensuite on va venir référencer une nouvelle directive personnalisée. On va utiliser le mot-clé directive, comme ça, on va ouvrir un objet, et puis on va référencer notre première directive avec son nom : border. Et on va lui attribuer une fonction anonyme. Cette fonction anonyme elle va nous permettre de faire fonctionner notre directive, et elle va pouvoir prendre des attributs à l'intérieur, et ces attributs-là, vous en aurez trois de disponibles. Le premier c'est el, ou élément ; vous le nommez comme vous voulez. Il va représenter l'élément HTML. On va regarder un petit peu ce qu'il y a à l'intérieur. Pour ça, vous allez enregistrer simplement et recharger votre page. Et vous allez voir qu'effectivement, on se retrouve ici avec l'élément HTML sur lequel on va pouvoir agir. Ça c'est fortement intéressant parce que ça veut dire qu'on va pouvoir facilement agir sur cet élément, et pourquoi pas en changer la bordure. Pour changer la bordure d'un élément HTML, on va agir sur son style. Et on va lui ajouter une border color, comme ça, qui va être égale à quelque chose. Par exemple du bleu. Si j'ajoute du blue, comme ça, vous allez voir que automatiquement cela va agir sur l'élément, et ça va changer sa bordure. Maintenant, vous auriez peut-être envie de rendre tout ça dynamique, et pouvoir choisir directement la couleur au moment où vous attribuez sur un élément cette directive. Il suffira de faire deux-points et d'ajouter par exemple une valeur, blue, pour pouvoir la récupérer derrière. On a un deuxième argument ici, c'est le binding. Alors, le binding, qu'est-ce que c'est ? C'est en fait toutes les propriétés que vous allez retrouver sur votre directive. On va, comme d'habitude, aller regarder ce qui se passe dans le binding. Je vous conseille à chaque fois de procéder comme ça. Regardez d'abord ce qui se passe à l'intérieur, avant d'exploiter. Le binding c'est un objet qui va être constitué avec des informations. arg c'est les arguments que vous passez, notamment ici on retrouve bien le blue qu'on avait mis à l'intérieur en premier argument, et puis ensuite on a plein d'informations. Sur la définition, il y a déjà pas mal de petites fonctions qui sont intéressantes. Au niveau des modifiers aussi, et puis on va avoir le name, border, et le rawName, c'est à dire toute la définition complète. Alors, ici si j'ai envie d'utiliser du coup blue, je vais simplement lui dire de récupérer sur le binding, ici, l'argument. Binding.arg. Et ça va me permettre, quand je vais assigner ma directive, de changer de façon dynamique la couleur. Ici c'est du bleu, mais si je lui passe à cet endroit-là du red, et que je reviens, effectivement, ça change automatiquement. Ça, c'est génial, parce que vous allez pouvoir prendre cette partie-là et la mettre absolument où vous voulez, sur n'importe quel élément, pour venir appliquer la couleur de bordure de façon très simple et très rapide. On pourrait faire beaucoup de choses avec les directives. On va voir un exemple un petit peu plus poussé, qui va nous permettre d'avoir un peu moins de code, notamment toute cette partie-là, où on était en train de travailler avec des styles, etc. On pourrait la réduire, et on pourrait se créer ici une directive qui va être une directive hide, et qui va nous permettre avec de la logique métier, de pouvoir travailler facilement sur l'élément, en sachant si on a un player ou pas, et donc implémenter une logique métier un petit peu plus poussée, pour réduire d'abord le code CSS, qui sert pas forcément, parce que on peut travailler sur l'élément directement, pas besoin de s'amuser comme ça, à chaque fois, là c'est vraiment, c'est ce qu'on appelle du scoping, c'est à dire qu'on vient appliquer la directive sur un élément et on travaille sur cet élément, c'est direct, on a pas besoin de passer par du style, avec différentes déclarations pour venir s'amuser. Là on va vraiment pouvoir travailler sur l'élément à proprement parler, et ça, ça va permettre de faire beaucoup de choses. Sachez que vous pouvez le coupler avec du jQuery sans aucun problème. Vue.js, c'est son grand intérêt, peut se mixer avec d'autres librairies, pour faire beaucoup plus de choses.

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
Votre/vos formateur(s) :
Date de parution :14 févr. 2017
Durée :2h25 (44 vidéos)

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 !