Votre guide dans les plaines du far-web

Formation développeur web


« Donne un poisson à un homme, tu le nourris pour un jour. Apprends-lui à pêcher, tu le nourris pour toujours. » Lao Tseu

Présentation

Mis à jour le

Background technique

Afin de découvrir et utiliser correctement VueJS, il faut être à l'aise avec ces différents concepts :

  • maîtriser un minimum le vanillaJS
  • bien comprendre la logique objet
  • connaître les problématiques front-end (DOM, événements, API, etc...)


Si vous ne vous sentez pas à l'aise avec ces notions, vous pouvez vous revoir les…

~~ Fin de l'extrait ~~

Installation

Mis à jour le

Il y a plusieurs façons d'installer VueJS, mais pour commencer, nous allons utiliser la version standard de développement. Il vous suffit juste d'appeler le fichier de VueJS avec la bonne version via les CDN proposés dans la doc.

Cette version de développement à l'avantage d'être plus verbeuse au niveau de l'affichage…

~~ Fin de l'extrait ~~

Instance de vue

Mis à jour le

Afin de commencer à écrire le code spécifique à notre application, Vue nous impose la création d'un objet de la classe Vue. La classe Vue est déterminée dans le cœur du framework, et votre application est un simple objet de cette classe générique. C'est pour cela que l'on parle d'instance…

~~ Fin de l'extrait ~~

Vue dev tool

Mis à jour le

Il existe un plugin pour navigateur qui permet de travailler plus efficacement avec VueJS. Le DevTools de Vue est optimisé, et va vous permettre de gagner du temps dans votre développement. Il permet l'affichage "user-friendly" de vos données, instances, composants, événements, etc... Ce qui vous permet de visualiser le…

~~ Fin de l'extrait ~~

Cycle de vie de l'application

Mis à jour le

Une instance de vue suit ce que l'on appel un "cycle de vie". C'est à dire que le framework va passer par différentes étapes lors de l'exécution de votre script, et chaque étape pourra être détectée via des sortes d’événements propres à Vue. Cela peux s'avérer pratique pour exécuter selon…

~~ Fin de l'extrait ~~

Données calculées

Mis à jour le

Les computed data (ou données calculées), sont des représentations abstraites de données "réelles" (cqfd: celles qui sont contenu dans data). Dans notre exemple, nous avons deux propriétés distincts : le nom et le prénom. Bien souvent, on va avoir besoin d'afficher les deux à la fois, via une variable que…

~~ Fin de l'extrait ~~

Filtres

Mis à jour le

Les filtres sont une autre fonctionnalité basique de Vue. Au même titre que les autres propriétés standards, vous allez pouvoir définir une série de filtres utiles à votre application dans les options de votre instance. Ces filtres vont vous permettre d'appeler une fonction lors de l'affichage d'une des propriétés dans…

~~ Fin de l'extrait ~~

Evénements natifs

Mis à jour le

Comme tous les autres concepts récurrents du développement web front-end, VueJS propose une gestion facilité des événements. Il y a différentes manières de gérer les événements avec Vue, et on peux modifier de nombreux comportements assez facilement via la syntaxe de Vue. Pour commencer, nous allons aborder les…

~~ Fin de l'extrait ~~

Rendu conditionnel et de liste

Mis à jour le

Avec Vue, vous pouvez déterminer l'affichage d'un élément, ou boucler sur un ensemble de valeurs en utilisant les directives v-if ou v-for. Comme d'habitude, il y a de nombreuses manières de procéder, mais nous verrons seulement les plus simples dans un premier temps.


Rendu conditionnel

Si vous souhaitez conditionner l'affichage d'une partie…

~~ Fin de l'extrait ~~

Liaison de données uni-directionnelle

Mis à jour le

Un des avantages majeurs de vueJS, et des frameworks JS en général, c'est le binding (liaison) automatique en les propriétés de votre objet JS, et leur affichage dans le DOM. Ce mécanisme est très pratique, car cela vous évite d'avoir à écrire les lignes de codes qui vont devoir modifier…

~~ Fin de l'extrait ~~

Liaison de données bi-directionnelle

Mis à jour le

VueJs propose aussi un mécanisme qui permet de binder des propriétés dans les deux sens (DOM <=> JS). C'est ce que l'on appel le two-way data binding (liaison bi-directionnelles des données). Cela est très pratique lorsque l'on utilise des éléments de formulaire par exemple.

Pour faire du two-way data binding, il…

~~ Fin de l'extrait ~~

Méthodes personnalisées

Mis à jour le

Au même titre qu'un objet classique, vous pouvez créer vos propres méthodes dans une instance de Vue. 


Il vous suffit de rajouter la propriété "methods" à l'instance de Vue, puis de définir des méthodes de cette manière :

methods: {
somme: function() {
let a = parseInt(prompt('Premier nombre ?'));
let…
~~ Fin de l'extrait ~~

Composants

Mis à jour le

Les composants de VueJS vous permettent de découper votre application en plusieurs morceaux relativement indépendants les uns des autres. Cela permet de bien spécifier chaque partie du code selon les besoins de l'application. Les composants sont toutefois reliés entre eux via un système de lien de parenté, ou chaque composant…

~~ Fin de l'extrait ~~

Transitions

Mis à jour le

Les transitions Vue sont des balises qui permettent de générer des classes CSS inline (via la modification du DOM) correspondantes à l'état d'une transition. Les transitions ne font pas d'animations en soit. Ce sera à vous d'utiliser les classes de transitions pour définir les transformations à effectuer pendant les différentes…

~~ Fin de l'extrait ~~

Mixins

Mis à jour le

Les mixins sont des sortes de composants "utilitaires" dans votre application. Elles permettent de stocker des fonctionnalités qui peuvent être utiles à plusieurs composants a priori totalement indépendant les des autres, et surtout d'éviter d'écrire du code redondant. 

Par exemple, vous pouvez regrouper toutes vos méthodes de formatage de texte (diverses…

~~ Fin de l'extrait ~~

Plugins

Mis à jour le

Installation des plugins

Pour installer un plugin dans Vue, vous avez deux choix :

  • soit via un CDN, si il existe
  • soit en l'installant en local


L’installation en local se fait via npm, par exemple :

npm install nom-du-plugin

Puis, vous devrai l'importer dans votre application de cette manière (au bon emplacement, se référer…

~~ Fin de l'extrait ~~

TP Typicode

Mis à jour le

Ce TP va vous permettre de travailler sur un projet un peu plus concret que le TD que nous venons de réaliser en parallèle des cours. L'API que vous utiliserez ici est un fake, c'est à dire que ça n'est pas une API au sens strict du terme. Ce sont…

~~ Fin de l'extrait ~~

Vue CLI

Mis à jour le

Vue-cli est un outils en ligne de commande qui vous permet différentes choses telles que :

  • créer un projet facilement selon préférences pré-enregistrées (presets) (dossier pour les vues, les composants, les assets, plugins, dépendances, etc...)
  • servir vos sources en mode dev pour travailler en local lors du développement de votre projet (serveur…
~~ Fin de l'extrait ~~

Vue UI

Mis à jour le

Maintenant que vous avez découvert l'outils en ligne de commande permettant de gérer le développement de vos projets, voici un outils bien pratique qui fait à peu près les même choses, mais via une interface graphique web. Vous allez pouvoir :

  • créer des projets
  • enregistrer des presets
  • lancer les taches serve build etc....
  • bénéficier…
~~ Fin de l'extrait ~~

Vue Router

Mis à jour le
Installation

Le router officiel de Vue (vue-router) n'est pas inclut dans le noyau de Vue. Il vous faudra donc l'installer, au besoin. 

Vous pouvez récupérer le code via un CDN :

https://unpkg.com/vue-router@3.1.6/dist/vue-router.js

Puis l'inclure dans votre HTML :

<script src="/path/to/vue-router.js"></script>

Ou bien l'installer via NPM :

npm install vue-router
Puis l'importer dans votre application… ~~ Fin de l'extrait ~~

VueX

Mis à jour le

Présentation de Flux et VueX

VueX est un plugin officiel de VueJS permettant l'implémentation du design pattern Flux, permettant de résoudre un problème récurrent des framework front-end JS : l'échange de données entre composants non-parent. Pour prendre un exemple, imaginez la messagerie instantanée de Facebook. Lorsque vous avez des nouveaux messages,…

~~ Fin de l'extrait ~~

Autres fonctionnalités

Mis à jour le

Il y a encore pleins de possibilités offertes par Vue que vous pourrez utiliser plus ou moins tôt dans votre apprentissage, en voici quelques unes :

~~ Fin de l'extrait ~~

Ressources

Mis à jour le

Documentation officielle (en grande partie en FR) : https://fr.vuejs.org/index.html


Liens utiles : 

~~ Fin de l'extrait ~~

TP FakeFlix

Mis à jour le

Ce TP va vous permettre de mettre en pratique toutes les notions de Vue abordées jusqu'ici. Il va vous permettre de travailler avec une vraie API REST, ce qui comporte :

  • l'authentification d'un user
  • la compréhension des différentes routes
  • la compréhension de la doc technique
  • etc...


Vous allez travailler avec l'API proposé par le site 

~~ Fin de l'extrait ~~

EEDSI - APFORMATION - MARS 2020

Mis à jour le