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…
~~ 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 comportement…

~~ Fin de l'extrait ~~

Cycle de vie de l'application

Mis à jour le

Une instance de vue suit ce que l'on appelle 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 différentes étapes…

~~ 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 distinctes : 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…

~~ 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 peut modifier de nombreux comportements assez facilement via la syntaxe de Vue. Pour commencer, nous allons aborder les événements de…

~~ 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…

~~ 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 ~~

TD - Concepts de bases

Mis à jour le

À refaire dans un seul exercice.

Idée  :faire un truc plus cohérent du genre édition de facture. Composant simples, pas d'effet, etc...