Au moment où nous écrivons cette formation, la dernière version courante de VueJs est la 2.5.x.
Tout au long de cette formation, nous allons développer une application CRUD de produits (site e-commerce) tout en plongeant en détail dans les concepts de VueJs. L’application simulera la zone d’administration d’un site de vente en ligne. Elle affichera un tableau de produits. La liste des produits sera une liste dynamique fournie par un service web en php. On utilisera un système de routes pour afficher tantôt la liste des produits, tantôt le formulaire de création d’un produit ou la page d’un produit.
Il existe des outils de développeurs pour les navigateurs comme Chrome qui permettent de déboguer une application Vue.js.

 

Il y a plusieurs manières d’installer la librairies, soit par NPM, par vue-cli ou les content delivery. Pour des raisons de simplicité, nous choisissons l’inclusion du lien de la version de production dans une balise <script> classique :
[crayon-5bf22b1d7988e185254121/]
En production, il peut être bien plus pratique de servir une version locale du code ou une version tagguée pour s’assurer que votre implémentation fonctionne bien avec une version précise et ne pas subir le contre-coup d’une mise à jour.

Vuejs, les propriétés et méthodes dynamiques.

L’objet data de la vue permet de stocker et de manipuler les données liés au composant vue. Parfois, vous avez besoin de traiter une information avant de l’afficher. Il s’agit par exemple du nom complet d’une personne qui va être la concaténation des propriétés nom et prénom ou le prix d’un produit qui va être préfixé par le symbole unitaire à gauche ou à droite selon la devise. Pour y arriver, un objet computed est ajoutée au script de l’application avec la logique complexe. Vous commencez déjà à mettre en œuvre le paterne MVVM de Vue.js. C’est un style architectural qui sépare une application en plusieurs sections bien distinctes.

Le modele (M) est la source de données non traitée. Elle peut être une donnée statique, une réponse d’une requête sur une API ou une requête sur une base de données.

Le V correspond à l’interface graphique de votre application. En principe elle doit être utilisée pour afficher/formater les données de l’application. Elle ne devrait pas contenir de la logique mise à part les tests conditionnels ou les directives.

Le ViewModel est le lien entre le modèle et la View. Il permet d’agir sur la données avant de l’afficher. Par exemple, changer toutes les lettres d’un champ en minuscule, calculer une valeur, appliquer une réduction, etc.

L’objet computed peut être composé de plusieurs fonctions.

Exemple :

 
[crayon-5bf22b1d79897658210370/]
 
[crayon-5bf22b1d7989a069346682/]

Les Observateurs ou watchers:

Les propriétés combinées sont assez pratiques et conviennent à beaucoup de cas en général. Mais parfois, l’utilisation d’un observateur est requis pour exécuter les opérations asynchrones ou couteuses en performance.

 
[crayon-5bf22b1d7989c063370847/]
 
[crayon-5bf22b1d7989e520959354/]
 

Dans cet article, vous avez encore pris connaissance de nombreux concepts du framework vuejs comme le paradigme MVVM, les fonctions computed, les watch, etc. Si vous venez du monde Angular, vous n’etes certainement pas perdu. Nous en apprenons encore plus dans un prochain article.