Introduction ​

Apprenez Vue avec des tutoriels vidéos sur VueMastery.com

Qu'est-ce que Vue? ​

Vue (/vjuː/ à prononcer comme en anglais: view) est un framework JavaScript qui se repose sur les standards HTML, CSS et JavaScript. Il propose une manière efficace de déclarer des composants pour la construction d'interfaces utilisateur, qu'elles soient simples ou complexes.

Voici un exemple simple :

import { createApp } from 'vue'

createApp({
  data() {
    return {
      compteur: 0
    }
  }
}).mount('#app')

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

<div id="app">
  <button @click="compteur++">
    Le compteur est à {{ compteur }}
  </button>
</div>

Résultat

Cet exemple illustre les deux principales fonctionnalités de Vue :

• Rendu déclaratif : Vue s'appuie sur le standard HTML avec une syntaxe de type template qui permet de décrire de manière déclarative la structure HTML tout en étant basée sur un état JavaScript.

• Réactivité : Vue traque automatiquement tout changement d'état JavaScript et met à jour efficacement le DOM en cas de changement.

Il se peut que vous ayez déjà des questions - pas d'inquiétude. Nous allons couvrir tous les petits détails dans la suite de la documentation. Pour l'instant, veuillez lire scrupuleusement la documentation afin d'avoir une vision d'ensemble de ce que propose Vue.

Le Framework Évolutif ​

Vue est un framework et un écosystème qui couvre la plupart des fonctionnalités courantes nécessaires au développement front-end. Le Web est très diversifié; les choses que nous y construisons peuvent varier radicalement. C'est pourquoi Vue a été conçu pour être flexible et adoptable de manière incrémentale. En fonction de votre cas d'utilisation, Vue peut être utilisé de différentes manières :

• Extension du HTML statique sans étape de construction
• Intégration de Web Components (éléments personnalisés) sur n'importe quelle page
• Application mono-page (SPA)
• Fullstack / Rendu côté serveur (SSR)
• JAMStack / Génération de sites statiques (SSG)
• Adapté pour l'ordinateur de bureau, le mobile, pour le WebGL et même le terminal.

Si vous trouvez ces concepts intimidants, ne vous inquiétez pas ! Le tutoriel et le guide ne requièrent que des connaissances de base en HTML et en JavaScript, et vous devriez pouvoir les suivre sans être un expert dans l'un de ces domaines.

Si vous êtes un développeur expérimenté et que vous souhaitez savoir comment intégrer au mieux Vue dans vos outils, ou si vous êtes curieux de savoir ce que ces termes signifient, nous en parlons plus en détail dans Les manières d'utiliser Vue.

Malgré la flexibilité, les connaissances de base sur le fonctionnement de Vue sont partagées dans tous ces cas d'utilisation. Même si vous n'êtes qu'à vos débuts, les connaissances acquises en cours de route vous seront utiles pour atteindre des objectifs plus ambitieux à l'avenir. Si vous avez niveau expérimenté, vous pouvez choisir la manière optimale de tirer parti de Vue en fonction des problèmes que vous essayez de résoudre, tout en conservant la même productivité. C'est pourquoi nous appelons Vue "le framework évolutif" : c'est un framework qui peut grandir avec vous et s'adapter à vos besoins.

Composant monofichier (Single-File Components) ​

Dans la plupart des projets Vue dotés d'outils de construction, nous créons des composants Vue en utilisant un format de fichier semblable à HTML appelé Composant monofichier, ou Single-File Component en anglais (également connu sous le nom de fichiers *.vue, abrégé en SFC). Un SFC Vue, comme son nom l'indique, encapsule la logique (JavaScript), le modèle (HTML) et les styles (CSS) du composant dans un seul fichier. Voici l'exemple précédent, écrit au format SFC :

<script>
export default {
  data() {
    return {
      compteur: 0
    }
  }
}
</script>

<template>
  <button @click="compteur++">Le compteur est à {{ compteur }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

<script setup>
import { ref } from 'vue'
const compteur = ref(0)
</script>

<template>
  <button @click="compteur++">Le compteur est à {{ compteur }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

Les SFC sont une fonctionnalité essentielle de Vue, et c'est la manière recommandée de créer des composants Vue si votre usage justifie une configuration avancée (usant d'outils de construction). Vous pouvez en savoir plus sur le comment et pourquoi faire des SFC dans la section qui lui est consacrée - mais pour l'instant, sachez que Vue se chargera de la configuration des outils de construction pour vous.

Styles d'API ​

Les composants Vue peuvent être créés dans deux styles d'API différents : l'Options API et la Composition API.

Options API ​

Avec l'Options API, nous définissons la logique d'un composant en utilisant un objet d'options telles que data, methods, et mounted. Les propriétés définies par les options sont exposées sur this dans les fonctions, qui pointe sur l'instance du composant :

<script>
export default {
  // état réactif
  data() {
    return {
      count: 0
    }
  },

  // Les méthodes sont des fonctions qui modifient l'état et déclenchent des mises à jour
  // Elles peuvent être utilisées par des gestionnaires d'événements dans le template.
  methods: {
    increment() {
      this.count++
    }
  },

  // hooks de cycle de vie
  mounted() {
    console.log(`La valeur initiale de count est ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Essayer en ligne

Composition API ​

Avec la Composition API, nous définissons la logique d'un composant à l'aide de fonctions API importées. Dans les SFC, la Composition API est généralement utilisée avec <script setup>. L'attribut setup est une indication qui permet à Vue d'effectuer des transformations au moment de la compilation, ce qui nous permet d'utiliser la Composition API avec moins de code nécessaire aux déclarations. Par exemple, les importations et les variables / fonctions déclarées au niveau racine dans <script setup> sont directement utilisables dans le modèle.

Voici le même composant, avec exactement le même modèle, mais en utilisant la Composition API et <script setup> à la place :

<script setup>
import { ref, onMounted } from 'vue'

// état réactif
const count = ref(0)

// fonctions qui modifient l'état et déclenchent des mises à jour
function increment() {
  count.value++
}

// hooks de cycle de vie
onMounted(() => {
  console.log(`La valeur initiale de count est ${this.count}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Essayer en ligne

Laquelle choisir ? ​

Tout d'abord, les deux styles d'API sont parfaitement capables de couvrir les cas d'utilisation courants. Il s'agit de différentes interfaces alimentées par le même système sous-jacent. En fait, l'Options API est implémentée par dessus la Composition API ! Les concepts fondamentaux et les connaissances sur Vue sont partagés entre les deux styles.

L'Options API est centrée sur le concept d'une "instance de composant" (this comme dans l'exemple), qui s'aligne généralement mieux sur un modèle mental basé sur les classes pour les utilisateurs issus de la POO. Elle est également plus adaptée aux débutants, car elle fait abstraction des détails de la réactivité et impose une organisation du code par le biais de groupes d'options.

La Composition API est centrée sur la déclaration de variables d'état réactives directement dans la portée d'une fonction, et sur la composition de l'état de plusieurs fonctions pour gérer la complexité. Elle offre une plus grande liberté d'écriture et nécessite une compréhension du fonctionnement de la réactivité dans Vue pour être utilisée efficacement. En retour, sa flexibilité permet des modèles plus puissants pour organiser et réutiliser la logique.

Pour en savoir plus sur la comparaison entre les deux styles et les avantages potentiels de la Composition API, consultez la FAQ sur la Composition API.

Si Vue est nouveau pour vous, voici notre recommandation générale :

• Pour l'apprentissage, choisissez le style qui vous semble le plus facile à comprendre. Encore une fois, la plupart des concepts fondamentaux sont partagés entre les deux styles. Vous pourrez toujours choisir l'autre style plus tard.

• Pour une utilisation en production :

  • Optez pour l'Options API si vous n'utilisez pas d'outils de construction ou si vous prévoyez d'utiliser Vue principalement dans des scénarios peu complexes, par exemple par une amélioration progressive de votre projet.

  • Choisissez la Composition API + les composants monofichiers (SFC) si vous envisagez de créer des applications complètes avec Vue.

Vous n'avez pas à vous engager dans un seul style pendant la phase d'apprentissage. Le reste de la documentation fournira des exemples de code dans les deux styles, et vous pourrez passer de l'un à l'autre à tout moment à l'aide du bouton Préférence d'API en haut de la barre latérale gauche.

Encore des questions ? ​

Consultez notre FAQ.

Choisissez votre parcours d'apprentissage ​

Chaque développeur a un style d'apprentissage différent. N'hésitez pas à choisir le parcours d'apprentissage qui vous convient le mieux, même si nous vous recommandons de revoir l'ensemble du contenu si possible !