Les bases du framework JavaScript – Vue.JS 2.0 

Lorsqu’on développe une application on se retrouve avec la problématique du front-end et de la multitude des solutions qui existent pour le gérer. Concernant les librairies Javascript c’est vraiment l’embarras du choix avec des phares comme jQuery ou Angular.

J’ai découvert Vue.js grâce au site Laracast qui lui consacre de nombreuses vidéos. Je vous avoue que je n’ai pas eu la patience de toutes les regarder mais j’ai été rapidement séduit par cette librairie et je me suis amusé un peu avec elle.

1. Qu’est ce que Vue.JS

Vue.js 2 est un framework JavaScript progressif qui se concentre sur la création d’interfaces utilisateur. Comme il ne fonctionne que dans la “couche de vue”, il ne fait aucune supposition de middleware et de back-end et peut donc être facilement intégré dans d’autres projets et bibliothèques.

Vue.js offre de nombreuses fonctionnalités pour la couche de vue et peut être utilisée pour créer de puissantes applications web d’une seule page. Vous trouverez ci-dessous une liste de fonctionnalités:

  • Interfaces réactives
  • Rendu déclaratif
  • Liaison de données
  • Directives
  • Logique de modèle
  • Composants
  • Gestion des événements
  • Propriétés calculées
  • Transitions CSS et animations
  • Filtres

La bibliothèque de base Vue.js 2 est de très petite taille (seulement 17 Ko). Cela garantit que le surcoût ajouté à votre projet en utilisant Vue.js est minime et que votre site web se charge rapidement.  Le site web de Vue.js est disponible sur: https://vuejs.org/

2. Comment utiliser Vue.JS

Il existe différentes manières d’inclure Vue.js dans votre projet Web:

  • Utiliser CDN en incluant une balise <script> dans un fichier HTML
  • Installation à l’aide du gestionnaire de packages de noeud (NPM)
  • Installez en utilisant Bower
  • Utilisez Vue-cli pour configurer votre projet

Dans la suite, nous allons à la Vue-cli pour installer un nouveau projet et installer la bibliothèque Vue.js 2.

3. Utilisation de Vue-Cli

D’abord, nous devons installer Vue-cli. L’interface de ligne command est disponible en tant que package NPM. Assurez-vous que Node.js et la commande npm sont disponibles sur votre système et utilisez la commande suivante pour installer globalement Vue-cli sur votre système local:

$ npm install -g vue-cli

Après avoir correctement installé le client, la commande vue devient disponible. Maintenant , nous sommes en mesure de lancer un projet en utilisant cette commande de la manière suivante:

 vue init webpack vueapp01

 Je recommande vue de lancer un nouveau projet et utiliser le modèle de webpack. Je  donne également au projet le nom vueapp01. L’exécution de la commande soulève quelques questions sur la ligne de commande comme vous pouvez le voir dans la capture d’écran suivante:

 $ vue init webpack vueapp01- Vue.js 2

Le projet est créé dans le dossier vueapp01 . Changez dans ce répertoire avec la commande suivante:

 $ cd vueapp01

Commencez à installer les dépendances en utilisant à nouveau npm :

 $ npm install

Après avoir terminé l’installation des paquets, vous pouvez démarrer le serveur web en mode développement en utilisant npm de la façon suivante:

$ npm run dev

Cela démarrera le serveur sur le port 8080 et la sortie de l’application est affichée automatiquement dans le navigateur: 

Image de vueapp01

Plus tard, si vous voulez construire pour la production, vous pouvez utiliser la commande suivante à la place. Dans ce cas, un dossier dist est créé contenant les fichiers nécessaires au déploiement productif.

 $ npm run build

4. Structure du projet

Jetons un coup d’oeil à la structure initiale du projet qui est disponible dans le dossier vueapp01 :

Structure du projet dans le vueapp01

Dans le dossier racine du projet, vous pouvez trouver des fichiers et des dossiers. Examinons les plus importants. Les fichiers package.json contiennent toutes les dépendances de votre projet. En utilisant la commande npm install avant d’avoir vérifié que les dépendances listées dans package.json sont installées dans le dossier node_modules du projet.

 

 Le fichier index.html contient le code HTML suivant:

Le fichier index.html contient le code HTML

Ce fichier est le point de départ de votre application. Notez que dans la section body un <div> élément est disponible dont la propriété id est définie sur string app . Cet élément est utilisé comme espace réservé pour la sortie générée par Vue.js.  Ensuite, jetez un oeil au fichier main.js dans le dossier src . C’est l’endroit où l’application Vue est initialisée:

Vue est la classe principale du framework - vue.js 2

En haut du fichier, vous pouvez trouver deux instructions d’importation:

  • import Vue from ‘vue’: Vue est la classe principale du framework
  • import App from ‘./App’App est le composant racine de l’application

En utilisant le nouveau mot-clé, une nouvelle instance de la classe de structure principale Vue est créée. Le constructeur prend un objet en tant que paramètre qui contient trois propriétés:

  • el: En affectant la chaîne #app à cette propriété, nous définissons que la sortie de l’application Vue doit être rendue à l’ <div id=”app”></div élément> dans index.html .
  • template: Le modèle contient le code HTML utilisé pour générer la sortie de l’application Vue.js.
  • components: Liste des composants Vue.js utilisés dans le modèle.

Le modèle est constitué uniquement d’un seul élément: <App/>. Bien sûr, ce n’est pas un élément HTML standard. C’est l’élément affecté au composant App. Pour pouvoir utiliser <App/> dans le modèle, le composant App est également répertorié dans l’objet affecté à la propriété components .

Voyons  donc ce qu’il y a dans l’implémentation du composant App dans le fichier App.vue :

Image de l'implémentation du composant App dans le fichier App.vue

Comme chaque composant Vue.js 2 à un seul fichier, l’implémentation de l’application est divisée en trois parties:

  • <template></template>: Code du modèle de composant
  • <script></script>: Code de script du composant
  • <style></style>: Code CSS du composant

Concentrons-nous sur le modèle et le script des deux premières sections . La section de script effectue une exportation par défaut d’un objet déclarant le composant nommé app . Encore une fois, la propriété components est utilisée pour déclarer qu’un autre composant (Hello) est requis par App. Ce sous-composant est utilisé dans le code modèle de l’application et implémenté dans le fichier hello.vue dans les composants du dossier . Afin de pouvoir utiliser le composant Hello dans App, il est également nécessaire d’inclure l’instruction d’importation correspondante en haut de la section de script.

 L’implémentation du composant Hello ressemble à ceci:

Image de l'implémentation du composant Hello 

Image de l'implémentation du composant Hello 

L’objet de configuration du composant est exporté par défaut. Cette fois, l’objet de configuration du composant contient une méthode de données . Cette méthode renvoie un objet qui représente le modèle du composant. Les propriétés définies dans l’objet de modèle peuvent être utilisées dans le modèle du composant en utilisant la syntaxe d’interpolation. Dans l’exemple ci-dessus, l’objet modèle n’a qu’une seule propriété: msg . La chaîne affectée à cette propriété est incluse dans le modèle du composant en utilisant:

 

 <h1>{{ msg }}</h1>

 

 La syntaxe d’interpolation requiert des accolades doubles pour inclure les données du modèle dans le modèle.

5. Utilisation de directive standard

Adaptons la Bonjour la mise en œuvre des composants pour en savoir plus sur l’utilisation des directives standard Vue.js.

  • v-for

La directive v-for permet de rendre un élément plusieurs fois en fonction des données sources. Vous pouvez utiliser cette directive pour itérer sur un tableau et sur les données du tableau vers la sortie. Ajoutez d’abord un tableau à l’objet renvoyé par la méthode data :

Le tableau à l'objet renvoyé par la méthode dataUtilisez ensuite la directive v-for afin de parcourir la liste:

Image de la directive v-for

  • v-model

La directive v-model crée une liaison bidirectionnelle sur un élément d’entrée ou un composant. Assurez-vous de définir une propriété dans votre objet de données qui doit être utilisée comme cible de liaison:

input_val

Utilisez ensuite la directive pour lier la valeur d’un élément d’entrée à cette propriété:

v-model

Avec cette liaison établie, nous obtenons deux effets:

  • chaque fois que l’utilisateur entre une valeur dans le champ de saisie, la valeur de input_val est mise à jour en conséquence
  • Si nous modifions la valeur de input_val dans notre programme, la valeur qui est affichée dans l’élément d’entrée est également mise à jour
  • v-text

En utilisant la directive v-text, le contenu textuel d’un élément est défini.

 Nous pouvons l’utiliser comme une alternative à la syntaxe {{…}} si le contenu du texte complet doit être défini. Par exemple, nous pouvons utiliser cette directive pour afficher la valeur input_val à l’utilisateur:

la directive v-text

Résumé

Le code complet de l’implémentation du composant Hello adapté doit maintenant ressembler à ceci:

Le code complet de l'implémentation du composant Hello

Le code complet de l'implémentation du composant Hello

Le résultat peut être vu dans la capture d’écran suivante:

Le résultat obtenu du code complet de l'implémentation du composant Hello de Vue.js 2.0

 

A très bientôt, je vous donne rendez-vous dans un autre tutoriel pour la suite.

 

Auteur : Sana Badji, Lead Développeur / Coach en Développement web et mobile

 

 

 

Laisser un commentaire

 

This is a demo store for testing purposes.

%d blogueurs aiment cette page :