Indroduction à Vue.js

Vue.js est une bibliothèque JavaScript/TypeScript pour créer des composants d’interfaces utilisateurs.

Vue.js est généralement utilisé pour du rendu DOM (HTML), cependant il peut être utilisé pour d’autres interfaces (le terminal, par exemple).

Un mot sur Vite

Vite est un outil de développement web qui permet d’avoir un serveur web et une mise à jour automatique des portions de la page sans rechargement (HMR : Hot Module Reload).

Il comprend les imports d’autres fichiers que les fichiers JavaScript, comme les .css ou les .svg et toutes les images (.jpg, .png, .gif, .webp, etc.) qui ne sont pas compréhensibles nativement par un navigateur. Vite s’occupe de transformer ces imports en code JavaScript compréhensible par le navigateur.

Les bases de Vue

La réactivité

Reactive Data Binding: Vue.js facilite la création d'interfaces utilisateur interactives. Il utilise un système de réactivité qui met automatiquement à jour le DOM (Document Object Model) lorsque l'état de l'application ou du composant change.

Plus d’info plus loin.

Approche composants

Composants: Vue.js est basé sur une architecture de composants, ce qui signifie que les applications sont construites en tant qu'ensemble de composants réutilisables. Chaque composant a son propre HTML, CSS, et JavaScript, dans un SFC (Single File Component) : un composant sera défini dans un fichier avec l’extension .vue qui aura 3 parties.

Les différentes parties d'un SFC

Un SFC aura 3 parties :

<script setup>
// Partie script pour les interactions et les données du parent...
</script>

<template>
  <!-- Partie template pour le rendu HTML -->
</template>

<style scoped>
  /* Partie style (CSS) du composant */
</style>

<script>
const title = Le titre
</script>

<template>
  <h1 class="main-title">
    {{ title }}
  </h1>
</template>

<style scoped>
.main-title {
  font-size: 3rem;
  font-weight: 800;
}
</style>

La réactivité dans les SFC

<script>
const counter = ref(0)
</script>

<template>
  <button @click="counter++">
    Increment counter: {{ counter }}
  </button>
</template>

Ici, ref() retourne un objet avec une seule propriété qui nous sera intéressante : value.

Le template contient deux choses importantes :

1. Les double-accolades de permettent de faire de l'interpolation : ce sera transformé en la valeur de la ref counter au moment du rendu du composant : le bouton aura pour texte  : Increment counter: 0
2. @click="counter++" signifie qu'au clic sur le bouton, la valeur de la propriété counter du composant sera incrémentée. Cela va provoquer ensuite un nouveau rendu du composant : le bouton aura pour texte : Increment counter: 1

C'est une des parties de la réactivité de Vue : le template se met à jour à chaque fois qu'une des propriétés du composant utilisée dans la template change de valeur.

Attention, dans la template, il ne faudra pas ajouter .value à la ref, contrairement à la partie <script> :

<script>
const counter = ref(0)
const increment = () => counter.value++
</script>

<template>
  <button @click="increment()">
    Increment counter: {{ counter }}
  </button>
</template>

Plus sur la réactivité sur la page dédiée