Présentation et introduction à Vue.js

Avec l’évolution rapide des technologies web, les interfaces utilisateur dynamiques et interactives sont devenues un standard. Pour répondre à ces besoins, Vue.js s’impose comme un choix de plus en plus populaire. Simple à prendre en main, flexible et puissant, Vue.js est un framework JavaScript conçu pour créer des interfaces utilisateur modernes et réactives. À travers cet article, nous allons découvrir les concepts de base de Vue.js, ses avantages et comment il peut être intégré dans vos projets. Pour approfondir, vous pouvez consulter la documentation officielle de Vue.js ou explorer les guides interactifs qui vous permettent de pratiquer en ligne.

Vue.js propose plusieurs manières de l’utiliser, dont le fichier global « vue.global.js » que nous utiliserons ici. Cette approche permet une mise en place rapide et simple, surtout pour les développeurs débutants ou pour des projets nécessitant peu de configuration. Cependant, Vue.js peut également être utilisé via un système de modules (comme avec Webpack ou Vite) pour des projets plus complexes. Voici un tableau comparatif pour vous aider à choisir la meilleure option en fonction de votre projet

Avec ces éclaircissements en tête, explorons les concepts fondamentaux de Vue.js.

Concept et fonctionnement de Vue.js

À la différence de langages comme PHP, qui s’exécutent côté serveur pour générer dynamiquement des pages HTML avant de les envoyer au navigateur, Vue.js fonctionne entièrement côté client. Ce framework JavaScript moderne permet de transformer une simple page HTML en une application dynamique et interactive, sans nécessiter un traitement préalable sur le serveur.

L’un des grands atouts de Vue.js est sa simplicité d’intégration. Une simple inclusion d’un fichier JavaScript global, comme vue.global.js, dans votre page HTML suffit à activer toutes ses fonctionnalités.

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>

Une fois ce fichier chargé dans le navigateur, vous pouvez utiliser Vue.js pour lier vos données directement à l’interface utilisateur. Cela signifie que toutes les modifications de données dans le script JavaScript sont immédiatement reflétées dans la vue, sans que vous ayez besoin de recharger la page.

Vue.js repose sur des concepts comme la liaison de données et la réactivité. Par exemple, grâce à sa syntaxe intuitive avec les « mustaches » ({{ }}), vous pouvez afficher et mettre à jour dynamiquement le contenu d’une balise HTML. Si une donnée change dans le code, Vue.js se charge automatiquement de mettre à jour l’affichage, sans manipulation directe du DOM.

<h1>{{ message }}</h1>

<h1>{{ message }}</h1>

Contrairement aux systèmes plus complexes, Vue.js n’impose pas de structure rigide. Vous pouvez l’intégrer progressivement dans une simple page HTML existante pour enrichir des parties spécifiques de votre interface utilisateur, ou bien construire une application complète en exploitant toute sa puissance.

En résumé, Vue.js transforme une simple page HTML en une application réactive et interactive. C’est un outil idéal pour créer des interfaces modernes sans dépendre d’un serveur pour gérer la logique de présentation, tout en gardant une structure claire et facilement maintenable.

Ressources complémentaires : Les cheatsheets pour Vue.js

Pour approfondir votre compréhension de Vue.js, il peut être utile d’avoir accès à des résumés synthétiques des principales fonctionnalités et directives du framework. Les cheatsheets sont des outils précieux qui permettent de retrouver rapidement des informations essentielles, comme les directives v-bind ou v-for, les cycles de vie des composants, ou encore les méthodes couramment utilisées.

Voici quelques ressources particulièrement intéressantes pour accompagner votre apprentissage :

• Vue.js Cheatsheet : Une référence claire et concise qui couvre les bases de Vue.js.
• Vue CheatSheet By ThemeSelection : Un résumé bien structuré avec des exemples de code.
• Vue Cheatsheet (ThemeSelection) : Une version interactive et détaillée pour explorer les différentes fonctionnalités.
• Vue 3 Cheatsheet for Developers : Un guide téléchargeable idéal pour les développeurs qui souhaitent avoir un support complet sous la main.

Ces outils complémentaires sont parfaits pour consolider vos connaissances et mieux appréhender les exemples pratiques présentés dans cet article. Que vous soyez débutant ou développeur expérimenté, ces cheatsheets vous aideront à progresser efficacement dans l’utilisation de Vue.js.

En interne, Vue.js utilise un DOM virtuel pour optimiser les mises à jour de l’interface utilisateur. Le DOM virtuel est une représentation légère de la structure de votre page web en mémoire, qui permet à Vue.js de déterminer précisément quelles parties doivent être modifiées lorsqu’une donnée change. Cette approche minimise les manipulations directes du DOM réel, ce qui améliore les performances et la fluidité de l’interface.

Grâce à cette technologie, les données que vous manipulez dans votre JavaScript sont automatiquement liées à la vue, c’est-à-dire à l’interface utilisateur. Toute modification de ces données est immédiatement reflétée à l’écran, sans intervention manuelle. Pour établir ce lien entre les données et l’interface, Vue.js s’appuie sur des directives spécifiques comme v-bind ou v-for, qui simplifient grandement la gestion des interactions dynamiques.

Dans la suite de cet article, nous allons illustrer ces concepts avec des exemples progressifs, en commençant par une application simple permettant d’afficher un message et de le modifier.

Exploration pratique de Vue.js : Un exemple simple

Dans cet exemple, nous allons afficher un message à l’écran et permettre à l’utilisateur de le modifier en cliquant sur un bouton. Voici comment procéder étape par étape.

Une structure HTML de base

Pour commencer à travailler avec Vue.js, il est nécessaire de fournir une structure HTML qui servira de base à notre application. Cette structure agit comme un conteneur pour toutes les données et les interactions que Vue.js rend dynamiques.

Dans cet exemple, nous avons un simple élément div avec un attribut id="app", qui sera le point d’ancrage de notre application Vue. C’est à partir de cet élément que Vue.js prendra le contrôle de l’interface pour y injecter et mettre à jour dynamiquement le contenu.

Nous affichons également une variable appelée message à l’aide de la syntaxe {{ }}. Ces accolades, appelées « mustaches », permettent de lier une donnée définie dans le script à l’affichage dans le DOM. Cette liaison garantit que toute modification apportée à la variable message dans le code JavaScript sera automatiquement reflétée dans le contenu de la balise <h1>.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
    </div>
</body>
</html>

Pour transformer notre structure HTML en une application dynamique et interactive, nous devons maintenant initialiser Vue.js. Cela passe par l’ajout d’une balise <script> qui contiendra le code JavaScript nécessaire pour activer Vue.js.

Pour garantir que l’application Vue s’exécute correctement une fois que le DOM est entièrement chargé, il est recommandé de placer cette balise <script> à la fin du fichier HTML, juste avant la fermeture de la balise <body>. Cela permet ainsi à Vue.js d’accéder au contenu de la page sans rencontrer d’erreur liée à des éléments non encore rendus par le navigateur.

Initialisons notre application Vue

Le rôle de ce script est d’établir une connexion entre le conteneur HTML et les données que nous allons définir. Cette étape est cruciale car elle permet à Vue.js de prendre le contrôle du DOM (Document Object Model) et de rendre le contenu dynamique en fonction des modifications apportées aux données.

L’initialisation d’une application Vue suit une structure simple en trois étapes principales :

1. Création d’une instance Vue grâce à Vue.createApp.
2. Définition des données réactives à l’aide de la méthode data().
3. Montage de l’application sur l’élément HTML cible à l’aide de app.mount('#app').

Voici à quoi ressemble le code nécessaire pour accomplir cela :

<script>
	const app = Vue.createApp({
		data() {
			return {
				message: 'Bienvenue dans Vue.js!'
			};
		}
	});
	app.mount('#app');
</script>

<script>
	const app = Vue.createApp({
		data() {
			return {
				message: 'Bienvenue dans Vue.js!'
			};
		}
	});
	app.mount('#app');
</script>

Dans cet exemple, nous définissons une propriété message avec la valeur initiale Bienvenue dans Vue.js!. Cette donnée est directement liée à la balise <h1> de notre structure HTML grâce à la syntaxe {{ message }}. Une fois le script exécuté, Vue.js s’assure que cette valeur est affichée dans la vue.

En résumé, cette étape marque le passage d’un HTML statique à une application dynamique pilotée par Vue.js, où les données et l’affichage sont étroitement synchronisés.

Ajoutons une méthode pour interagir avec les données

Pour enrichir notre exemple et démontrer la puissance de Vue.js, nous allons ajouter un bouton permettant de modifier dynamiquement la valeur de message. Cette interaction introduit une nouvelle dimension à notre application en la rendant réactive aux actions de l’utilisateur. Voici le HTML mis à jour :

<div id="app">
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Changer le message</button>
</div>

<div id="app">
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Changer le message</button>
</div>

Dans ce code, le bouton utilise l’attribut spécial @click pour associer un événement de clic à une méthode appelée updateMessage. Cet attribut est une directive spécifique à Vue.js qui simplifie la gestion des événements. À chaque clic sur le bouton, la méthode correspondante est exécutée, permettant d’agir directement sur les données.

Définir la méthode dans le code JavaScript

Pour que le bouton fonctionne, nous devons définir la méthode updateMessage dans notre application Vue. Voici comment l’ajouter dans la section methods :

methods: {
    updateMessage() {
        this.message = 'Vous avez cliqué sur le bouton!';
    }
}

methods: {
    updateMessage() {
        this.message = 'Vous avez cliqué sur le bouton!';
    }
}

Le champ methods est un objet qui contient toutes les fonctions de l’application Vue. Ces fonctions peuvent être déclenchées depuis le HTML via des événements comme @click, mais elles ont également accès aux données définies dans data().

Dans cet exemple, la méthode updateMessage modifie directement la valeur de message. Une fois cette modification effectuée, Vue.js met automatiquement à jour le contenu de la balise <h1> liée à cette donnée grâce à son mécanisme de réactivité. Vous trouverez le fichier de test en suivant le lien Introduction et liaison de données.

Chargement dynamique des données

Une des plus grandes forces de Vue.js réside dans sa capacité à interagir avec des serveurs pour récupérer et afficher des données dynamiquement. Cette fonctionnalité rend Vue.js particulièrement adapté aux applications modernes qui nécessitent des mises à jour fréquentes du contenu sans rechargement de la page. Dans cette section, nous allons découvrir comment afficher une liste de messages récupérés depuis une API.

Structure HTML de base

Pour commencer, créons une structure HTML simple qui servira de base pour afficher dynamiquement une liste de messages. Voici le code correspondant :

<div id="app">
    <h1>Liste des messages</h1>
    <ul>
        <li v-for="message in messages" :key="message.id">{{ message.text }}</li>
    </ul>
</div>

<div id="app">
    <h1>Liste des messages</h1>
    <ul>
        <li v-for="message in messages" :key="message.id">{{ message.text }}</li>
    </ul>
</div>

Dans cet exemple, nous avons un conteneur <div> identifié par id="app", qui sera le point d’ancrage de notre application Vue. À l’intérieur de ce conteneur, une liste non ordonnée <ul> est utilisée pour afficher les messages.

Chaque message est affiché à l’aide de la balise <li> avec la directive v-for. Cette directive permet de parcourir un tableau nommé messages et de générer un élément de liste pour chaque entrée. Vue.js s’occupe automatiquement de la logique d’itération et de l’insertion dans le DOM.

De plus, nous utilisons l’attribut spécial :key pour associer une clé unique à chaque élément de la liste, ici la propriété id de chaque message. Cette clé est importante pour permettre à Vue.js d’optimiser le rendu et de détecter les changements plus efficacement lorsque le tableau messages est mis à jour.

Le contenu de chaque élément de liste est injecté dynamiquement grâce à la syntaxe {{ message.text }}. Cette expression permet de lier la propriété text de chaque message directement à l’affichage, en garantissant que toute modification de cette donnée dans le tableau sera immédiatement reflétée dans l’interface utilisateur.

Pourquoi utiliser v-for et :key ?

La directive v-for est essentielle pour créer des listes dynamiques basées sur des données. Vue.js utilise cette directive pour parcourir des tableaux ou des objets et afficher chaque élément dans une structure HTML répétée. En parallèle, l’attribut :key joue un rôle crucial dans la gestion efficace des éléments du DOM. En attribuant une clé unique à chaque élément, Vue.js peut suivre les changements dans la liste et éviter de recréer inutilement les éléments inchangés. Cela améliore considérablement les performances, en particulier pour des listes volumineuses ou fréquemment mises à jour.

Récupération des données depuis une API

L’une des caractéristiques les plus puissantes de Vue.js est sa capacité à interagir avec des serveurs pour récupérer des données dynamiques. Ces données peuvent être utilisées pour alimenter des listes, des tableaux ou tout autre composant visuel de votre application. Dans cet exemple, nous allons configurer notre application Vue pour récupérer une liste de messages depuis une API externe et les afficher dynamiquement.

Configuration initiale des données

Pour gérer les données récupérées, nous devons d’abord définir une structure dans notre application Vue. Cela se fait dans la méthode data() qui retourne un objet contenant les données réactives. Voici à quoi cela ressemble :

data() {
    return {
        messages: []
    };
},

data() {
    return {
        messages: []
    };
},

Ici, nous créons une propriété messages, initialisée comme un tableau vide. Cette propriété sera utilisée pour stocker les données récupérées depuis l’API. Grâce à la réactivité de Vue.js, toute modification apportée à ce tableau sera automatiquement reflétée dans l’interface utilisateur.

Récupération des données avec Fetch

Pour interroger une API et remplir notre tableau messages, nous ajoutons une méthode appelée fetchMessages() dans la section methods de notre application Vue. Voici le code :

methods: {
    fetchMessages() {
        fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
            .then(response => response.json())
            .then(data => {
                this.messages = data.map(post => ({ id: post.id, text: post.title }));
            })
            .catch(error => console.error('Erreur de chargement des messages :', error));
    }
}

methods: {
    fetchMessages() {
        fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
            .then(response => response.json())
            .then(data => {
                this.messages = data.map(post => ({ id: post.id, text: post.title }));
            })
            .catch(error => console.error('Erreur de chargement des messages :', error));
    }
}

Décomposition du code :

1. fetch : Cette méthode JavaScript permet d’effectuer une requête HTTP pour récupérer des données depuis une API. Ici, nous interrogeons l’API publique jsonplaceholder.typicode.com pour obtenir une liste de 5 publications.
2. response.json() : Une fois la réponse reçue, cette méthode convertit les données en un format JSON exploitable par JavaScript.
3. then(data => { ... }) : La méthode then() est utilisée pour traiter les données renvoyées par l’API une fois converties en JSON. Ici, data représente le tableau d’objets JSON reçu, où chaque objet correspond à une publication avec des propriétés comme id, title, etc.
4. data.map(post => { ... }) : map() parcourt chaque élément du tableau data et retourne un nouveau tableau transformé. Pour chaque publication (post), la fonction fléchée extrait uniquement deux propriétés : id : Identifiant unique, et text : Titre de la publication.
5. this.messages : Le tableau transformé est assigné à this.messages. Comme messages est réactif, Vue.js met à jour automatiquement l’affichage de la liste dans le DOM via la directive v-for.
6. Gestion des erreurs : La méthode inclut un gestionnaire d’erreur avec .catch() pour capturer et afficher toute anomalie survenue lors de la récupération des données.

Appel de la méthode lors du chargement de l’application

Pour que notre application récupère automatiquement les données dès qu’elle est initialisée, nous utilisons le cycle de vie mounted(). Cette méthode spéciale est exécutée une fois que l’application Vue est montée sur le DOM.

mounted() {
    this.fetchMessages();
}

mounted() {
    this.fetchMessages();
}

En appelant this.fetchMessages() à l’intérieur de mounted(), nous garantissons que la liste des messages sera récupérée dès que l’application est prête. Vue.js s’occupera ensuite de mettre à jour l’interface utilisateur pour afficher les données.

Résumé

En combinant la définition des données, la méthode de récupération et l’utilisation du cycle de vie mounted(), nous créons une application Vue capable de charger dynamiquement des données depuis un serveur. À chaque fois que les données sont modifiées ou ajoutées, Vue.js met automatiquement à jour l’affichage, offrant une expérience utilisateur fluide et réactive. Vous pouvez accéder à l’exemple en ligne depuis le lien Chargement dynamique et mounted().

Conclusion

Avec Vue.js, nous avons découvert comment transformer une simple page HTML en une application dynamique et réactive, où les données et l’interface utilisateur interagissent harmonieusement. Cette introduction pose les bases d’un outil puissant et accessible, idéal pour concevoir des interfaces modernes.

Cependant, ce n’est que le début de ce voyage. À mesure que les besoins deviennent plus complexes, Vue.js offre de nombreuses fonctionnalités avancées, comme la gestion des composants, l’intégration avec des bibliothèques tierces, ou encore l’optimisation des performances pour des applications à grande échelle.

Dans les prochains articles, nous explorerons comment enrichir davantage notre application en intégrant Tailwind CSS pour la styliser rapidement, gérer des interactions plus sophistiquées, et structurer notre code avec des composants réutilisables. Avec ces outils, vous serez en mesure de concevoir des applications robustes et élégantes, adaptées aux exigences des utilisateurs modernes.