Initiation à Vue3 : afficher un message et créer un compteur

Après avoir maîtriser les fondamentaux JavaScript et TypeScript, il est temps de s'attaquer aux frameworks frontend modernes. Dans cette série d'articles, nous allons explorer Vue3 à travers des exemples concrets. Nous examinerons la syntaxe de base ainsi que les nouvelles fonctionnalités proposées par cette version du framework.

Une structure HTML classique se présente généralement comme suit :


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Application Vue3</title>
</head>
<body>
    <!-- Contenu ici -->
</body>
</html>

Pour utiliser Vue.js dans notre projet, nous devons intégrer le fichier JavaScript correspondant. Voici comment procéder :


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Application Vue3</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!-- Contenu ici -->
</body>
</html>

Nous allons maintenant afficher un message simple "hello world" dans notre page. Voici comment implémenter cela :


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Application Vue3</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
const application = Vue.createApp({
  template: '<div>hello world</div>'
});

application.mount("#app");
</script>
</html>

Une approche plus sophistiquée consiste à utiliser la propriété "data" pour stocker nos données, ce qui est plus conforme aux conventions Vue :


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Application Vue3</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
const application = Vue.createApp({
  data() {
    return {
      message: 'hello world'
    };
  },
  template: '<div>{{ message }}</div>'
});

application.mount("#app");
</script>
</html>

Cette syntaxe peut sembler enhabituelle au premier abord. Ne vous inquiétez pas, nous verrons chaque concept en détail dans les articles suivants.

Passons maintneant à l'exemple du compteur. L'objectif est d'incrémenter un nombre chaque seconde. Voici comment réaliser cela avec Vue3 :


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Application Vue3</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
const application = Vue.createApp({
  data() {
    return {
      compteur: 1
    };
  },
  mounted() {
    setInterval(() => {
      this.compteur++;
    }, 1000);
  },
  template: '<div>{{ compteur }}</div>'
});

application.mount("#app");
</script>
</html>

Dans cet exemple, la fonction "mounted" représente un hook du cycle de vie du composant. Elle s'exécute automatiquement lorsque le composant est inséré dans le DOM. Nous aborderons les différents hooks du cycle de vie dans un article dédié.

Ces deux exemples fondamentaux montrent la simplicité avec laquelle Vue3 permet de créer des interfaces réactives. La combinaison de la syntaxe de template et du système de données réactives facilite considérablement le développement d'applications web modernes.

Publié le 3 juillet à 05h54

L'Atelier Monstre

Initiation à Vue3 : afficher un message et créer un compteur

Étiquettes Populaires