Les base de vuejs : guide pour débuter rapidement

Frontend Dev Développement web Technologies Web Frameworks
Vue.js
Tim
June 17th, 2024
image description

Vue.js : Un Framework JavaScript Simple et Redoutablement Performant

Vous vous demandez : "Vue.js, est-ce vraiment le bon choix pour mes projets ?" La réponse est un grand OUI !

Vue.js n’est pas devenu l’un des frameworks JavaScript les plus populaires par hasard. Il est simple à apprendre, flexible, et redoutablement performant. Ce guide vous aidera à démarrer rapidement et efficacement avec Vue.js.

Pourquoi Vue.js est un Excellent Choix ?

Vue.js apporte une vraie fraîcheur aux interfaces web. Imaginez créer des applications modernes et complexes en quelques lignes de code, avec une structure claire et bien organisée. Bien sûr, d'autres frameworks comme React, Angular ou Svelte offrent aussi des fonctionnalités puissantes, mais laissez-moi vous montrer pourquoi Vue.js se distingue.

Quelques Avantages Clés de Vue.js :

  • Facile à apprendre : Vue.js a été pensé pour être accessible, même aux débutants. Sa syntaxe claire et sa documentation abordable facilitent la prise en main, même si vous n’êtes pas un expert JavaScript.

  • Composants réutilisables : Avec Vue.js, vous pouvez créer des briques de code que vous réutiliserez à volonté. Un composant de saisie semi-automatique, par exemple, peut être placé dans plusieurs sections de votre app sans avoir besoin de le recoder. C’est simple et efficace.

  • Performances optimisées : Vue.js est rapide et performant, même pour des applications complexes. Exploité avec la Composition API et les composables, ce framework peut vraiment monter en puissance.

  • Large communauté et écosystème : La communauté de Vue.js a explosé depuis que je l’ai adopté en 2017. Des bibliothèques comme PrimeVue fournissent de nombreux composants prêts à l’emploi et des tutoriels en ligne abondent pour vous aider.

Premier pas : Installation de Vue.js

Bien que je vous conseille de toujours vous référer à la document officielle de Vue.js, j'ai écris cet article sur l'installation, rapide et pas à pas, d'un nouveau projet.

La structure d’un composant Vue.js

Imaginez que chaque composant Vue.js est comme une brique de LEGO que vous assemblez pour construire votre application. Chaque composant contient trois parties principales :

  • Template : la section HTML du composant, où vous définissez la structure visuelle qui s’affiche pour l’utilisateur.

  • Script : la section JavaScript du composant, qui contient toute la logique : fonctions, variables et gestion des données.

  • Style : la section CSS du composant, où vous appliquez les styles spécifiques pour personnaliser l’apparence de votre composant.

Voici un exemple simple :

html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apprendre Vue rapidement</title>
</head>
<body>
    <div id="app">
        {{ bio }}
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
        const { createApp, ref } = Vue
      
        createApp({
            setup() {
                const bio = ref("Salut, c'est Tim ! Je suis ravi de te partager ma passion pour le code ! Yeah !")
                return {
                    bio
                }
            }
        }).mount('#app')
      </script>
</body>
</html>

Explications étape par étape

1. Inclusion de Vue.js :

html 
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Cette ligne importe Vue.js à partir d'un CDN. Cela permet d'utiliser Vue dans ta page sans installer quoi que ce soit.

2. Création de l'application Vue :

javascript 
const { createApp, ref } = Vue
createApp({
    setup() {
        const bio = ref("Salut, c'est Tim ! Je suis ravi de te partager ma passion pour le code ! Yeah !")
        return {
            bio
        }
    }
}).mount('#app')

Ici, c'est la base de la base :

  • createApp : C’est la fonction qui initialise une nouvelle application Vue. Elle se lie à une section spécifique de la page (comme le <div id="app">), reliant ainsi le JavaScript avec le code HTML correspondant.

  • setup() : Fonction clé dans Vue 3, setup() est l’endroit où tu définis les données et la logique de ton composant. C’est ici que tu vas créer tes variables, propriétés calculées, cycles de vie, et fonctions. En gros, toute la vie de ton composant se déroule ici !

3. Utilisation de ref pour des données réactives :

javascript 
const bio = ref("Salut, c'est Tim ! Je suis ravi de te partager ma passion pour le code ! Yeah !");

  • ref() : Cela crée une donnée réactive, ici appelée bio. "Réactif" signifie que si la valeur de bio change, Vue mettra automatiquement à jour l'interface utilisateur pour refléter ce changement.

4. Retourner les données à l'interface :

javascript 
return {
    bio
}

  • Ce retour permet à Vue d'accéder à la variable bio et de l'afficher dans le HTML. C'est grâce à ça que la donnée peut être utilisée dans le modèle (template).

5. Montage de l'application Vue sur le DOM :

javascript 
}).mount('#app')

  • mount('#app') : Cela indique à Vue d'attacher l'application au div avec l'id app dans le HTML (<div id="app">). Vue prend alors le contrôle de cet élément et affiche la valeur de bio.

Résultat :

Lorsque la page se charge, Vue récupère la valeur de bio et l'affiche à l'intérieur du div avec l'id app, remplaçant {{ bio }} par "Salut, c'est Tim ! Je suis ravi de te partager ma passion pour le code ! Yeah !".

Récapitulatif :

  • Tu importes Vue.

  • Tu crées une application Vue avec createApp().

  • Tu utilises ref() pour créer des données réactives.

  • Tu montes l'application sur un élément HTML avec mount().

  • Vue affiche automatiquement les données réactives dans le HTML.

Les bases du langage Vue.js

1. Les variables : Utilisez les accolades {{ }} pour afficher des variables dans votre template.

html 
<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <p>{{ salutations }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Bienvenue dans le monde de Vue.js !',
      salutations: 'Bonjour à tous !'
    }
  }
}
</script>

2. Les méthodes : Activez des actions pour manipuler vos données.

Les méthodes dans Vue.js sont des fonctions associées à un composant, souvent déclenchées lorsqu’un événement se produit, comme un clic de bouton.

Imaginez votre application Vue.js comme un jeu de combat. Vous avez des personnages (les données) et des mouvements spéciaux (les méthodes). Les méthodes sont les coups que vous lancez pour modifier et transformer vos données, ajoutant du punch et de l'interactivité à votre application.

Astuces :

  • Réutilisation : Vous pouvez appeler une méthode depuis différents endroits de votre code, comme si vous répétiez un combo efficace.

  • Paramètres : Passez des paramètres pour adapter chaque méthode, un peu comme varier les coups selon l’ennemi.

  • Retour de valeurs : Les méthodes peuvent renvoyer des valeurs pour enrichir les interactions dans votre application.

3. Les événements : Connectez-vous aux actions des utilisateurs.

Les événements sont les actions de l’utilisateur qui déclenchent une réponse de l’application. C’est là que Vue.js répond et agit en fonction des interactions.

  • Événements courants : click, keyup, change, mouseover, mouseout, submit, dblclick, etc.

  • Modificateurs : Utilisez .enter pour keyup avec la touche “Entrée”, .prevent pour empêcher un comportement par défaut (comme un rechargement de page), et .stop pour stopper la propagation d’un événement.

  • Multiples événements : Associez plusieurs méthodes à un même événement, comme enchaîner plusieurs attaques en un coup.

html 
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Vue.js</title>		
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
	<div id="app">
		<h1 class="text-3xl font-bold underline">
            Mon sport préféré : {{ favoriteSport }}.
        </h1>
        <button class="bg-sky-300 px-2 py-3" @click.prevent="changeFavoriteSport('Basketball')">Change favorite sport</button>
	</div>
	<script>
        const { createApp, ref } = Vue
      
        const app = createApp({
            setup() {
                const favoriteSport = ref('Football');
			  	const changeFavoriteSport = (newSport) => {
					favoriteSport.value = newSport;
				}
                return {
                    favoriteSport, changeFavoriteSport
                }
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

Dans cet exemple, la méthode changeFavoriteSport est définie à l'intérieur de la fonction setup grâce à la Composition API de Vue 3. Elle permet de changer la valeur de la variable favoriteSport lorsqu'elle est appelée.

  1. Composition API : Avec Vue 3, nous utilisons le setup pour définir des méthodes et des variables réactives comme favoriteSport. Cela permet de mieux organiser le code et d'améliorer la réutilisation des fonctions.

  2. Fonctionnalité : Ici, la méthode changeFavoriteSport prend un argument newSport et met à jour la variable réactive favoriteSport. Cela signifie que toute partie de l'interface utilisateur qui dépend de favoriteSport sera automatiquement mise à jour lorsque cette méthode est appelée.

  3. .prevent : Cet événement utilise le modificateur .prevent, qui empêche le comportement par défaut de l'événement. Dans ce cas, cela empêche le rechargement de la page si ce bouton se trouvait dans un formulaire ou avait un lien par exemple.

4. Les propriétés calculées (computed properties) : Optimisez et simplifiez votre logique

Les computed properties permettent de créer des valeurs dérivées de vos données sans recalculer tout le temps. Elles sont parfaites pour des opérations répétitives ou lourdes, en se mettant à jour uniquement lorsque leurs données sources changent.

Imaginez vos computed properties comme un bouclier réactif dans un jeu de combat : il ne s’active que lorsque c’est nécessaire, évitant ainsi de gaspiller de l’énergie à chaque instant.

  • Mise en cache : Les computed properties sont mémorisées et ne se recalculent que si les données utilisées changent.

  • Syntaxe simple : Déclarez vos computed properties comme des fonctions, et Vue.js se charge de tout.

javascript 
<template>
  <div>
    <p>Nombre d'articles: {{ articlesCount }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const articles = ref(['Article 1', 'Article 2', 'Article 3']);

    // Utilisation de computed pour calculer le nombre d'articles
    const articlesCount = computed(() => articles.value.length);

    return { articles, articlesCount };
  }
};
</script>

Explication : Ici, articlesCount est une computed property qui calcule dynamiquement le nombre d'articles. Elle ne se met à jour que si articles change.

5. Les observateurs (watchers) : Surveillez les changements de données

Les watchers sont là pour surveiller une donnée en particulier et réagir instantanément à ses changements. Ils sont idéaux pour lancer des actions secondaires, comme appeler une API dès qu’une variable est modifiée.

Les watchers dans Vue.js, c’est comme un compagnon de combat qui surveille votre barre de vie : dès que celle-ci descend trop bas, il intervient pour vous soigner automatiquement.

  • Surveillance précise : Ils suivent des données spécifiques, parfaits pour des tâches qui nécessitent une réponse immédiate aux changements.

  • Appels d’API : Utilisez-les pour déclencher des actions comme des requêtes HTTP sans alourdir les autres fonctions.

javascript 
<template>
  <div>
    <input v-model="searchQuery" placeholder="Recherchez...">
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const searchQuery = ref('');

    // Utilisation de watch pour déclencher une action sur chaque changement de searchQuery
    watch(searchQuery, (newQuery) => {
      console.log("Nouvelle recherche :", newQuery);
      // Ici, on pourrait déclencher une recherche en API ou filtrer des résultats
    });

    return { searchQuery };
  }
};
</script>

Explication : Le watcher observe searchQuery et déclenche une action à chaque modification. Parfait pour des interactions instantanées comme des recherches en direct.

En route vers des applications plus complexes

Ce guide vous a donné un aperçu des bases de Vue.js, mais il ne s’agit que de la pointe de l’iceberg ! Vue.js offre une multitude de fonctionnalités et de possibilités pour construire des applications web de qualité :

  • Routage : Naviguez entre différentes pages de votre application.

  • Composants : Structurez votre application en composant réutilisable.

  • Gestion des données : Stockez et gérez vos données de manière efficace.

  • Gestion des formulaires : Simplifier la création de formulaires interactifs.

Continuez votre exploration :

N’hésitez pas à expérimenter et à créer vos propres projets avec Vue.js. La communauté Vue.js est là pour vous accompagner dans votre apprentissage !

Conclusion : Vue.js, votre allié pour des applications web exceptionnelles

Vue.js est un allié incontournable pour les développeurs web, qu’ils soient débutants ou confirmés. Grâce à sa simplicité, sa flexibilité et à une communauté passionnée, il permet de créer des applications modernes, performantes, et à l’architecture bien organisée. N'attendez plus pour explorer Vue.js et voir par vous-même comment ce framework peut transformer vos projets en expériences web fluides et captivantes. Prêt à faire le premier pas ?