Introduction to Vue.JS Framework
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:
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:
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 :
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:
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:
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 :
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:
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 :
Utilisez ensuite la directive v-for afin de parcourir la liste:
- 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:
Utilisez ensuite la directive pour lier la valeur d’un élément d’entrée à cette propriété:
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:
Résumé
Le code complet de l’implémentation du composant Hello adapté doit maintenant ressembler à ceci:
Le résultat peut être vu dans la capture d’écran suivante:
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