Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Découvrir Vue.js 2

Mettre à jour un élément

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Fréquemment, vous devrez effectuer des mises à jour dans les deux sens, c'est-à-dire dans la vue et dans l'instance. Dans cette vidéo, vous apprendrez à faire les mises à jour correctement.
04:44

Transcription

Cette vidéo, vous l'attendiez. Je vous assure que vous l'attendiez, et pour cause, nous allons mettre à jour cet objet pour commencer à avoir un vrai jeu. Un vrai jeu qui fonctionne. Alors, ça va marcher comment ? On va devoir mettre à jour un élément de notre interface avec des informations. On sait qu'actuellement, quand on va cliquer dessus, ce que l'on aimerait en fait, c'est que cet objet change de taille et aille se placer ailleurs dans l'interface. Vous allez voir, pour faire de la mise à jour sur un élément, ça va pas être très compliqué. D'abord il va falloir récupérer cet élément. Cet élément, on va le mettre dans une variable, ça va être event.target. En fait, la target va représenter l'élément. Donc, let element est égal à event/target. Puis ensuite on va devoir le faire évoluer. Alors, faut le changer de place, et faut lui changer de taille. Pour lui changer de taille, ça va pas être compliqué non plus, on va se préparer une size, donc, une variable size, qui va être en fait simplement la petite méthode classique Math.random qu'on va avoir, comme ça, donc un Math.random multiplié par une valeur qui va être une valeur max moins une valeur min, plus une valeur min. C'est comme ça qu'on fait généralement. Donc, la valeur max, on sait qu'actuellement c'est du 50 pixels. Alors, on va laisser ça à 50, mais on pourrait aller plus loin. C'est à dire qu'on pourrait dire, tiens, c'est 100 pixels, et ça peut aller jusqu'à 10 pixels, pour avoir quelque chose d'un peu petit. Donc, ensuite on va faire +10, et là on aura notre size. Maintenant, pour la mettre à jour, on va faire un element point et puis on va aller chercher les styles point, on sait aussi qu'on doit mettre à jour la height et la width. Et là regardez, on va utiliser ce qu'on a déjà traité à l'avance, c'est à dire, l'utilisation ici d'une concaténation propre. On va prendre size, ici, et on sait que c'est les pixels. Et on va faire exactement la même chose, pour le coup, pour ici la width. Alors si vous voulez faire ça simple, vous pouvez faire element height est égal à element width, est égal à size. Et comme ça vous allez mettre les deux à jour en même temps. Maintenant on peut tester. On recharge l'interface. On va avoir, voilà, un petit problème, bien sûr, c'est sur le point-virgule, comme d'habitude, on va recharger, et puis là on va voir qu'effectivement, à chaque fois que je vais cliquer, mon élément va changer de taille. Ça c'est génial. Maintenant on va le bouger, cet élément. Alors, pour le bouger, comment on va faire ? On va utiliser la même technique que ça, sauf que on va rendre dynamique non pas la size, mais on va rendre dynamique la position. Donc la position ça va être une variable qui va s'appeler top, et une variable qui va s'appeler left. Pourquoi ? Parce que on veut changer la position depuis le haut et depuis la gauche. Alors, ici on va utiliser des valeurs que je connais déjà à l'avance, c'est 60 pour cette partie-là, et puis on va mettre 5 ici, pas 10, 5 ce sera très très bien. Parce que, en fait, on est en pourcentage. Ici c'est du pourcentage, et on va agir sur le margin. Pour agir sur le margin, vous allez utiliser la même technique, point margin, et par contre on aura pas besoin de mettre à jour deux valeurs, on va en mettre à jour qu'une seule. On va mettre à jour par contre ici top avec un pourcentage, et puis ensuite on va fabriquer derrière le left, avec un pourcentage aussi. Vous allez essayer en fait de respecter les propriétés que vous avez là. Donc là vous voyez que je suis en train d'agir sur le style d'un élément, je viens simplement écraser le style d'un élément avec des informations. Et vous mettez à jour en direct un élément, comme ça, de façon très simple. Ce qui est bien c'est que c'est du random. Ça veut dire que notre jeu commence à être construit. À chaque fois que je vais cliquer, je vais avoir un élément qui va apparaitre et je vais pouvoir allez cliquer. Et comme sa taille change et que sa position change, ça va me permettre d'avoir quelque chose de dynamique qui va me permettre de tester le joueur. Je pourrais vérifier aussi si il est en train d'effectuer des clics à côté. Je pourrais vérifier si, quand il clique dessus, il a bien cliqué à l'intérieur. Donc là je peux faire plein de choses. On pourrait s'amuser aussi, pourquoi pas, à avoir une bordure, et se dire que quand il clique sur la bordure, ça fait quelque chose d'autre. On peut aussi intercepter le clic bonus. Ça c'est possible aussi. On sait qu'il y a un clic bonus qui peut intervenir. Le clic bonus, on l'aura, et il apparaitra s'il a utilisé alt, et donc dans ce cas-là, on pourrait lui décompter des bonus, par exemple. On peut imaginer plein de choses. On est sur un jeu, on va donc pouvoir le faire évoluer. Il va falloir faire un peu d'animation, aussi, parce que c'est pas très joli comme ça, mais en tout cas le jeu commence à fonctionner, et commence à avoir du moins une petite logique, que l'on va pouvoir mettre en place, et que l'on va pouvoir faire évoluer.

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 !