Cette vidéo de formation s'adresse aux développeurs qui souhaitent concevoir des interfaces utilisateur riches et dynamiques avec le framework JavaScript progressif Vue.js. Afin d'illustrer et de mettre en pratique les différentes fonctionnalités, la vidéo présente en fil rouge la conception et la réalisation d'un jeu de rapidité et d'adresse.

Pour commencer, vous découvrirez Vue.js et les cas dans lesquels il est à privilégier par rapport à d'autres frameworks tels que Angular ou React. Puis, vous étudierez la création d'une première instance de type Vue et son cycle de vie.

Vous verrez ensuite comment utiliser Vue.js pour interagir avec le DOM. Vous manipulerez ainsi différentes propriétés, méthodes, attributs ou directives pour initialiser la grille du jeu, modifier l'affichage des cases, compter le nombre d'essais restants ou encore afficher un message de félicitations. Puis, l'utilisation de propriétés calculées, d'écouteurs et de styles dynamiques vous permettra de tester toute la réactivité de Vue.js.

Pour finir, vous apprendrez à structurer une page en composants et verrez comment faire communiquer entre eux un composant parent avec un composant enfant.

Téléchargements

• Des fichiers complémentaires (419 Ko)

• Durée totale02h33
• Introduction
  • Qu'est-ce que Vue.js ?03:07
  • Pourquoi utiliser Vue.js ? 01:24
  • Création d'une première instance08:26
  • Le cycle de vie d'une instance02:19
  • Utilisation de plusieurs instances05:45
• Utiliser Vue.js pour interagir avec le DOM
  • Lier une valeur du modèle à une valeur d'attribut de la vue09:00
  • Afficher du HTML du modèle dans la vue04:04
  • Utiliser les méthodes de mutation pour modifier les valeurs d'un tableau07:24
  • Ajouter un évènement clic sur les cases d'un tableau04:20
  • Passer des valeurs en arguments avec les évènements05:01
  • Utiliser les modificateurs d'évènements au sein d'une instance04:25
  • Utiliser l'affichage conditionnel03:24
  • Afficher une liste04:36
• Mettre en œuvre la réactivité de Vue.js
  • Le binding bidirectionnel09:34
  • Les propriétés calculées02:21
  • Les écouteurs02:42
  • Les styles dynamiques05:01
  • Les styles dynamiques avec un objet02:32
  • Les styles dynamiques avec un objet sans CSS03:08
• Structurer une page en composants
  • Installation de Vue CLI09:03
  • Création d'un premier composant11:41
  • Communication entre composant parent et composant enfant06:42
  • Communication entre composant enfant et composant parent11:05
  • Communication entre deux composants enfants06:53
  • Communication entre composants à l'aide d'un bus d'évènements07:05
  • Utilisation de requêtes Ajax pour récupérer du contenu externe12:47