La structure d'une application Vue.js

Par jcherilus, 22 février, 2025

Pour bien comprendre Vue.js et son utilité dans le développement web, il est essentiel de se familiariser avec ses principales fonctionnalités. Parmi ces dernières, on trouve les composants, les directives et l’utilisation du DOM virtuel, des éléments qui facilitent grandement le développement d'applications web modernes et dynamiques.

Les composants Vue.js

L'un des principes fondamentaux de Vue.js est le système de composants. Un composant Vue est un morceau de code réutilisable qui représente une partie de l’interface utilisateur (UI) d’une application. Les composants peuvent être intégrés dans l’application principale ou dans d'autres composants pour structurer et organiser le code de manière modulaire. Un composant est généralement composé d'une Template html pour la structure, JavaScript pour la logique et css pour l'apparence. Les composants dans Vue.js sont utilisés pour diviser une application en petites parties indépendantes et réutilisables, ce qui rend le code plus propre et plus facile à maintenir.

Le DOM et le Virtual DOM : C'est quoi ?

Le DOM, c'est quoi ?

Le DOM, ou "Document Object Model", c'est une interface de programmation qui permet de manipuler des pages web. C'est comme une carte de votre page HTML ou XML, où chaque élément de la page (texte, image, lien, etc.) est un nœud dans un arbre de données. Ce DOM est accessible et modifiable grâce à JavaScript.

Le Virtual DOM, c'est quoi ?

Le Virtual DOM est une sorte de copie virtuelle du DOM réel, mais stockée dans la mémoire de votre navigateur. Il permet à des frameworks comme Vue.js de manipuler cette version virtuelle plutôt que d'agir directement sur la page web. Ensuite, il compare cette version virtuelle avec le DOM réel pour ne mettre à jour que ce qui a vraiment changé.

Pourquoi utiliser le Virtual DOM ?

En utilisant le Virtual DOM, on obtient plusieurs avantages :

  • Séparation de la logique de rendu du DOM réel.
  • Plus facile à manipuler et à tester.
  • Il est aussi plus rapide car les changements sont d'abord faits sur la version virtuelle, avant de les appliquer efficacement au DOM réel.

Les directives Vue.js

Les directives dans Vue.js sont des attributs spéciaux qui permettent de manipuler le DOM d’une manière déclarative. Elles modifient le comportement ou l’apparence d’un élément HTML en fonction des données liées.

Vue.js intègre plusieurs directives utiles, comme :

  • v-text : Remplace le texte de l’élément par la valeur d'une variable.
  • v-html : Met à jour le innerHTML de l'élément.
  • v-show : Affiche ou masque un élément selon une condition booléenne.
  • v-if et v-else : Conditionne l'affichage d'un élément en fonction d'une expression.
  • v-for : Permet d'itérer sur une liste pour générer dynamiquement des éléments.
  • v-on : Attache un écouteur d'événement (comme un clic, une soumission de formulaire, etc.) à un élément.
  • v-bind : Lie une propriété HTML à une donnée JavaScript, permettant de modifier dynamiquement l'attribut.
  • v-model : Crée une liaison bidirectionnelle entre une donnée et un élément HTML (utile notamment pour les formulaires).

Ces directives sont des outils puissants qui permettent de lier la vue aux données de manière simple et efficace.

Exemple simple Vue.js : Hello World

Dans cet exemple, nous allons créer une simple application Vue.js qui affiche un message "Hello World" et utilise une directive pour interagir avec l'élément HTML.

Code HTML et Vue.js

<title>Hello World Vue.js</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 
<!-- Div qui contient l'application Vue -->
<div id="app">
    <!-- Affichage d'un message avec Vue.js -->
    <p>{{ message }}</p>
</div>

<script>
    // Création de l'instance Vue
    new Vue({
        el: '#app', // Liaison à l'élément HTML avec id="app"
        data: {
            message: 'Hello World, Bienvenue dans Vue.js!' // Message à afficher
        }
    });
</script>

  • Le HTML : On commence par une div avec l’id app. C’est là où notre appli Vue va se placer.

  • L'instance Vue : Ensuite, on crée une nouvelle instance de Vue avec new Vue({}). Ça permet de lier Vue à la div #app, pour que Vue puisse y afficher des trucs dedans.

  • Les données : On définit une variable message dans la partie data. C’est cette variable qui contient le texte à afficher dans notre page. Grâce à {{ message }}, Vue va afficher ce texte automatiquement dans la page. Si on change cette variable, le texte dans la page change aussi !

Références

Commentaires