Comment lier un attribut HTML à une donnée réactive dans Vue.js ?

Bonne réponse : Avec la directive v-bind:attribut="variable" ou son raccourci :attribut="variable". v-bind:src="imageUrl" ou le raccourci :src="imageUrl" lie un attribut HTML à une expression JavaScript. L'attribut est mis à jour réactivement.

Comment un composant enfant communique-t-il avec son parent ?

Bonne réponse : En émettant des événements avec defineEmits() que le parent écoute avec @evenement. L'enfant émet des événements : const emit = defineEmits(["update"]); emit("update", valeur). Le parent écoute : <Enfant @update="handleUpdate" />.

Qu'est-ce que le cycle de vie d'un composant Vue.js ?

Bonne réponse : Une série de hooks (onMounted, onUpdated, onUnmounted) qui permettent d'exécuter du code à des moments spécifiques. Les hooks de cycle de vie permettent d'intervenir à différentes étapes : onBeforeMount, onMounted (composant dans le DOM), onUpdated (après mise à jour), onUnmounted (nettoyage).

Qu'est-ce que le slot (contenu de projection) dans Vue.js ?

Bonne réponse : Un mécanisme pour passer du contenu HTML/template du composant parent vers le composant enfant. Les slots permettent à un composant parent d'injecter du contenu dans un composant enfant. Dans l'enfant : <slot></slot>. Dans le parent : <Enfant><p>Mon contenu</p></Enfant>.

Vue Débutant — Composants & Router

Q: Qu'est-ce que Vue.js ?

Bonne réponse : Un framework JavaScript progressif pour construire des interfaces utilisateur. Vue.js est un framework JavaScript progressif créé par Evan You. Il est conçu pour être adoptable de manière incrémentale : on peut l'utiliser pour une simple partie de page ou pour des applications complètes (SPA).

Q: Quelle commande utilise-t-on pour créer un nouveau projet Vue.js avec Vite ?

Bonne réponse : npm create vue@latest. La commande officielle est npm create vue@latest. Elle lance un assistant interactif qui propose TypeScript, Vue Router, Pinia, Vitest, et d'autres options.

Q: Qu'est-ce que la Composition API dans Vue.js 3 ?

Bonne réponse : Une nouvelle façon d'organiser la logique d'un composant avec la fonction setup() et les fonctions réactives comme ref() et reactive(). La Composition API (introduite dans Vue 3) permet d'organiser la logique par fonctionnalité plutôt que par option. On utilise ref(), reactive(), computed(), watch() dans la fonction setup() ou <script setup>.

Q: Quelle directive Vue.js permet d'afficher conditionnellement un élément ?

Bonne réponse : Les deux (v-if et v-show). v-if et v-show permettent toutes les deux l'affichage conditionnel. v-if ajoute/supprime l'élément du DOM. v-show utilise display: none en CSS (l'élément reste dans le DOM).

Q: Qu'est-ce que l'interpolation de texte dans Vue.js ?

Bonne réponse : La syntaxe {{ variable }} qui affiche la valeur d'une variable réactive dans le template. L'interpolation utilise la syntaxe "Moustache" {{ expression }}. Vue.js évalue l'expression et met à jour automatiquement le DOM quand la valeur change. Exemple : <p>Bonjour {{ nom }}</p>.

Q: Comment écouter un événement click sur un bouton dans Vue.js ?

Bonne réponse : Avec v-on:click="methode" ou son raccourci @click="methode". v-on:click="handleClick" ou le raccourci @click="handleClick" écoute l'événement click. On peut aussi écrire du code inline : @click="count++".

Q: Comment déclarer une variable réactive avec la Composition API ?

Bonne réponse : Avec ref() pour les valeurs primitives et reactive() pour les objets. ref(valeur) crée une référence réactive pour les valeurs primitives (string, number, boolean). reactive(obj) rend un objet entier réactif. Dans le template, les refs sont automatiquement "déballées" (pas besoin de .value).

Q: Qu'est-ce que le "two-way binding" (liaison bidirectionnelle) avec v-model ?

Bonne réponse : Une liaison qui synchronise automatiquement un champ de formulaire avec une variable réactive. v-model="variable" crée une liaison bidirectionnelle sur les champs de formulaire (input, textarea, select). La variable se met à jour quand l'utilisateur modifie le champ, et le champ se met à jour si la variable change.

Q: Quelle directive permet d'afficher une liste d'éléments dans Vue.js ?

Bonne réponse : v-for="item in items". v-for="item in items" (ou v-for="item of items") itère sur un tableau ou un objet. Il est fortement recommandé de fournir une clé unique avec :key="item.id".

Vue-Js Debutant Quiz-Vuejs-Debutant Vuejs-Composants Vuejs-Directives Vue-Router Vuejs-Options-Api V-Model Questions-Entretien-Vuejs Qcm-Vuejs Apprendre-Vuejs Javascript Front-End Vue-3

Débutant 🔀 Mixte 20 questions ⏱ 15 min

📝

Vue Débutant — Composants & Router

20 questions sur les bases de Vue.js : composants, directives et Vue Router. Idéal pour préparer un entretien développeur Vue.js débutant.

20 questions ⏱ ~15 min Niveau Débutant

Publié/Développé par Mezgani Said

Développeur web full‑stack et formateur spécialisé en Angular, TypeScript et Node.js, il partage sur AngularForAll des ressources complètes pour les développeurs : tutoriels pratiques, guides pas‑à‑pas, outils gratuits, exercices, QCM techniques et retours d’expérience issus de projets réels (SaaS, micro‑frontends, architectures modulaires, applications d’entreprise).
Le site couvre l’ensemble de l’écosystème web : front‑end, intégration HTML/CSS, Composants réutilisables, SEO, back‑end, cloud, IA, CLI, productivité, bien‑être, outils web et métiers du digital.
Un espace pensé pour générer, apprendre, progresser et développer des projets modernes avec des bonnes pratiques professionnelles.

Banque de révision : les 30 questions corrigées

Voici l'intégralité des 30 questions de « Vue Débutant — Composants & Router », chacune avec sa bonne réponse et son explication. Le quiz interactif ci-dessus en tire une sélection aléatoire à chaque tentative — utilisez cette liste complète pour réviser.

Un framework JavaScript progressif pour construire des interfaces utilisateur (bonne réponse)
Un langage de programmation serveur
Une bibliothèque de styles CSS
Une base de données NoSQL

Explication : Vue.js est un framework JavaScript progressif créé par Evan You. Il est conçu pour être adoptable de manière incrémentale : on peut l'utiliser pour une simple partie de page ou pour des applications complètes (SPA).

Vue.js est dit "progressif" car vous pouvez l'intégrer progressivement dans un projet existant, sans tout réécrire.

npm create vue@latest (bonne réponse)
npm create vue-app
npx vue new mon-projet
npm init vue-project

Explication : La commande officielle est npm create vue@latest. Elle lance un assistant interactif qui propose TypeScript, Vue Router, Pinia, Vitest, et d'autres options.

Le projet créé utilise Vite comme outil de build par défaut, offrant un démarrage rapide et un HMR (Hot Module Replacement) efficace.

Une nouvelle façon d'organiser la logique d'un composant avec la fonction setup() et les fonctions réactives comme ref() et reactive() (bonne réponse)
Un outil pour composer de la musique
Une API pour faire des requêtes HTTP
L'ancienne façon d'écrire des composants Vue

Explication : La Composition API (introduite dans Vue 3) permet d'organiser la logique par fonctionnalité plutôt que par option. On utilise ref(), reactive(), computed(), watch() dans la fonction setup() ou <script setup>.

La Composition API facilite la réutilisation de la logique entre composants via les composables (fonctions qui retournent de la logique réactive).

v-if
v-show
Les deux (v-if et v-show) (bonne réponse)
v-display

Explication : v-if et v-show permettent toutes les deux l'affichage conditionnel. v-if ajoute/supprime l'élément du DOM. v-show utilise display: none en CSS (l'élément reste dans le DOM).

Utilisez v-if quand la condition change rarement. Utilisez v-show pour des basculements fréquents (meilleure performance).

La syntaxe {{ variable }} qui affiche la valeur d'une variable réactive dans le template (bonne réponse)
Un calcul mathématique
Une requête HTTP
Un type de composant

Explication : L'interpolation utilise la syntaxe "Moustache" {{ expression }}. Vue.js évalue l'expression et met à jour automatiquement le DOM quand la valeur change. Exemple : <p>Bonjour {{ nom }}</p>.

L'interpolation ne fonctionne que dans le contenu texte, pas dans les attributs HTML. Pour les attributs, utilisez v-bind ou son raccourci :.

Avec la directive v-bind:attribut="variable" ou son raccourci :attribut="variable" (bonne réponse)
Avec {{ attribut }}
Avec l'attribut bind
Directement avec attribut="variable"

Explication : v-bind:src="imageUrl" ou le raccourci :src="imageUrl" lie un attribut HTML à une expression JavaScript. L'attribut est mis à jour réactivement.

Pour lier plusieurs attributs à la fois, utilisez v-bind="objet" où l'objet contient les paires clé-valeur des attributs.

Avec v-on:click="methode" ou son raccourci @click="methode" (bonne réponse)
Avec onclick="methode()"
Avec addEventListener dans le template
Avec la directive v-click

Explication : v-on:click="handleClick" ou le raccourci @click="handleClick" écoute l'événement click. On peut aussi écrire du code inline : @click="count++".

Pour passer l'événement natif : @click="handleClick($event)". Pour des modificateurs : @click.stop (stopPropagation), @click.prevent (preventDefault).

Avec ref() pour les valeurs primitives et reactive() pour les objets (bonne réponse)
Avec let tout simplement
Avec this.variable
Avec useState()

Explication : ref(valeur) crée une référence réactive pour les valeurs primitives (string, number, boolean). reactive(obj) rend un objet entier réactif. Dans le template, les refs sont automatiquement "déballées" (pas besoin de .value).

Dans le <script setup>, déclarez simplement const count = ref(0). Dans le template, utilisez {{ count }} sans .value.

Une liaison qui synchronise automatiquement un champ de formulaire avec une variable réactive (bonne réponse)
Une liaison entre deux composants
Une liaison avec le serveur
Une liaison qui ne fonctionne que pour les checkboxes

Explication : v-model="variable" crée une liaison bidirectionnelle sur les champs de formulaire (input, textarea, select). La variable se met à jour quand l'utilisateur modifie le champ, et le champ se met à jour si la variable change.

v-model est un sucre syntaxique pour :value + @input. Il fonctionne avec tous les types de champs de formulaire.

v-for="item in items" (bonne réponse)
v-loop="item in items"
v-each="item in items"
v-repeat="item in items"

Explication : v-for="item in items" (ou v-for="item of items") itère sur un tableau ou un objet. Il est fortement recommandé de fournir une clé unique avec :key="item.id".

On peut aussi obtenir l'index : v-for="(item, index) in items". Pour les objets : v-for="(value, key, index) in objet".

Une instance Vue réutilisable avec son propre template, état et logique (bonne réponse)
Un fichier CSS
Une fonction JavaScript simple
Un plugin externe

Explication : Un composant Vue (fichier .vue) encapsule un template (HTML), un script (JavaScript) et un style (CSS). Il peut recevoir des props (données du parent) et émettre des événements vers le parent.

Un fichier .vue est un Single File Component (SFC). Il contient trois sections : <template>, <script>, <style>.

Avec les props : le parent les passe dans le template, l'enfant les déclare avec defineProps() (bonne réponse)
Avec un service global
Avec le state management obligatoirement
On ne peut pas passer de données vers l'enfant

Explication : Les props permettent au parent de passer des données à l'enfant. Dans l'enfant (Composition API) : const props = defineProps({ titre: String }). Dans le parent : <Enfant :titre="monTitre" />.

Les props sont en lecture seule. Ne modifiez jamais une prop dans l'enfant. Utilisez plutôt une copie locale ou émettez un événement.

En émettant des événements avec defineEmits() que le parent écoute avec @evenement (bonne réponse)
En modifiant directement les données du parent
Via une variable globale
Les enfants ne peuvent pas communiquer avec le parent

Explication : L'enfant émet des événements : const emit = defineEmits(["update"]); emit("update", valeur). Le parent écoute : <Enfant @update="handleUpdate" />.

Pour le two-way binding sur une prop, utilisez v-model côté parent et defineProps + defineEmits(["update:modelValue"]) côté enfant.

Créer une référence réactive pour une valeur primitive, accessible via .value dans le script (bonne réponse)
Créer une référence au DOM uniquement
Importer un composant
Déclarer une fonction

Explication : ref() crée une valeur réactive. Pour les primitives, c'est obligatoire (Vue ne peut pas détecter les changements sur des primitives avec reactive). Dans le template, la ref est automatiquement "déballée" (pas besoin de .value).

ref() peut aussi référencer un élément du DOM avec l'attribut ref dans le template : <input ref="monInput" />.

Une valeur dérivée automatiquement de données réactives, mise en cache tant que ses dépendances ne changent pas (bonne réponse)
Une valeur stockée dans une base de données
Une valeur calculée une seule fois au lancement
Un type de prop

Explication : computed() crée une valeur calculée réactive. Elle est mise en cache : elle ne se recalcule que si ses dépendances réactives changent. Beaucoup plus performant qu'une méthode appelée dans le template.

Utilisez computed() plutôt qu'une méthode dans le template quand le calcul est coûteux ou utilisé plusieurs fois.

Avec watch() ou watchEffect() (bonne réponse)
Avec setInterval()
Avec addEventListener()
On ne peut pas surveiller les changements

Explication : watch(source, callback) surveille une ou plusieurs sources réactives et exécute un callback quand elles changent. watchEffect() suit automatiquement toutes les dépendances réactives utilisées dans la fonction.

Utilisez watchEffect() quand vous n'avez pas besoin de l'ancienne valeur et que vous voulez un suivi automatique des dépendances.

Un sucre syntaxique de la Composition API qui simplifie l'écriture des composants avec moins de boilerplate (bonne réponse)
Un script qui ne s'exécute qu'au montage
Un script pour les tests
L'ancienne façon d'écrire les composants

Explication : <script setup> est une syntaxe simplifiée de la Composition API. Les imports, variables et fonctions sont directement disponibles dans le template. Plus besoin de setup() explicite ni de return.

Avec <script setup>, defineProps(), defineEmits() et defineExpose() sont des macros du compilateur, pas besoin de les importer.

Avec :class="{ active: isActive, 'text-large' => isLarge }" (bonne réponse)
Avec class="active if isActive"
Avec v-class="condition"
Uniquement avec du JavaScript dans le style

Explication : :class accepte un objet, un tableau ou une chaîne. La syntaxe objet est la plus courante : :class="{ active: isActive }". On peut aussi utiliser un tableau : :class="[classeA, classeB]".

On peut combiner classe statique et dynamique : <div class="static" :class="{ active: isActive }">.

Une série de hooks (onMounted, onUpdated, onUnmounted) qui permettent d'exécuter du code à des moments spécifiques (bonne réponse)
La durée pendant laquelle le composant est affiché
Le temps de compilation du composant
Les props du composant

Explication : Les hooks de cycle de vie permettent d'intervenir à différentes étapes : onBeforeMount, onMounted (composant dans le DOM), onUpdated (après mise à jour), onUnmounted (nettoyage).

Le hook le plus utilisé est onMounted() pour les appels API initiaux. Pour le nettoyage (intervalles, écoutes), utilisez onUnmounted().

Importer le composant et l'utiliser dans le template sans l'enregistrer (avec script setup) (bonne réponse)
L'enregistrer dans le fichier main.js obligatoirement
Utiliser require()
Les composants sont automatiquement globaux

Explication : Avec <script setup>, il suffit d'importer le composant : import MonComposant from "./MonComposant.vue". Il est immédiatement disponible dans le template : <MonComposant />.

Pour les composants utilisés dans beaucoup de pages, vous pouvez les enregistrer globalement dans main.js avec app.component("Nom", Composant).

Le store de gestion d'état officiel pour Vue.js, successeur de Vuex (bonne réponse)
Une bibliothèque de composants UI
Un outil de build
Une base de données locale

Explication : Pinia est le gestionnaire d'état officiel recommandé pour Vue.js 3. Il remplace Vuex avec une API plus simple, un meilleur support TypeScript, et pas de mutations (on modifie directement le state via des actions).

Un store Pinia se définit avec defineStore(). Il expose un state, des getters (computed) et des actions (méthodes).

Le composant doit accepter une prop modelValue et émettre un événement update:modelValue (bonne réponse)
v-model ne fonctionne que sur les éléments HTML natifs
Le composant doit avoir une méthode model()
Utiliser v-bind à la place

Explication : Pour que v-model fonctionne sur un composant, il doit : 1) accepter une prop modelValue, 2) émettre emit("update:modelValue", nouvelleValeur). On peut aussi nommer le v-model : v-model:titre → prop titre + emit update:titre.

Avec defineModel() (Vue 3.4+), la gestion de v-model est encore plus simple : const model = defineModel().

Gérer la navigation entre différentes vues/pages dans une application Vue.js monopage (SPA) (bonne réponse)
Faire des requêtes HTTP
Gérer l'état global
Compiler les templates

Explication : Vue Router est le routeur officiel pour Vue.js. Il permet de naviguer entre différentes vues sans rechargement de page. On définit des routes liées à des composants, et on utilise <RouterView /> pour afficher la vue courante.

Installez-le avec npm install vue-router. Configurez les routes dans un fichier router/index.js.

Avec useRouter().push("/chemin") ou useRouter().replace("/chemin") (bonne réponse)
Avec window.location.href
Avec un composant
La navigation programmatique n'est pas supportée

Explication : Le composable useRouter() donne accès au routeur. router.push("/users") navigue (ajoute à l'historique). router.replace("/users") navigue sans ajouter à l'historique. router.go(-1) recule.

Pour passer des paramètres : router.push({ name: "user", params: { id: 123 } }).

Un mécanisme pour passer du contenu HTML/template du composant parent vers le composant enfant (bonne réponse)
Un type de variable réactive
Une directive pour les listes
Un hook de cycle de vie

Explication : Les slots permettent à un composant parent d'injecter du contenu dans un composant enfant. Dans l'enfant : <slot></slot>. Dans le parent : <Enfant><p>Mon contenu</p></Enfant>.

Les slots nommés : <slot name="header">. Les slots scopés : l'enfant expose des données au parent via <slot :data="maData">.

Avec fetch() ou une bibliothèque comme Axios, généralement dans onMounted() (bonne réponse)
Avec la directive v-fetch
Avec le composant
Vue.js ne permet pas les requêtes HTTP

Explication : Vue.js n'a pas de module HTTP intégré. On utilise fetch() (natif) ou Axios. Typiquement, on fait l'appel dans onMounted() et on stocke le résultat dans une ref().

Créez des composables pour encapsuler la logique de fetch : const { data, loading, error } = useFetch("/api/users").

Un composant qui permet de rendre du contenu dans un autre endroit du DOM, en dehors de la hiérarchie du composant (bonne réponse)
Un système de téléportation de données
Un type de route
Une animation

Explication : <Teleport to="body"> déplace le rendu de son contenu vers l'élément cible (ex: body). Très utile pour les modales, les tooltips, les notifications qui doivent être en dehors du flux normal.

Le contenu téléporté reste réactif et connecté à son composant parent, même s'il est physiquement ailleurs dans le DOM.

Avec v-model pour chaque champ, et des conditions ou une bibliothèque comme VeeValidate ou FormKit (bonne réponse)
Uniquement avec du JavaScript natif
Les formulaires ne sont pas supportés
Avec des props uniquement

Explication : Pour des formulaires simples, v-model + des conditions suffisent. Pour des formulaires complexes avec validation, VeeValidate (basé sur yup/zod) et FormKit sont les solutions les plus populaires.

VeeValidate s'utilise avec useForm() et useField() en Composition API.

v-bind="objet" lie toutes les propriétés de l'objet comme attributs de l'élément (bonne réponse)
Une erreur de syntaxe
Un moyen de désactiver le binding
Une directive pour le style uniquement

Explication : v-bind="objet" (sans argument) lie toutes les propriétés de l'objet comme attributs HTML. Exemple : const attrs = { id: "monId", class: "maClasse" } → <div v-bind="attrs">.

Très utile pour passer dynamiquement tous les attributs d'un composant parent à un élément natif avec inheritAttrs: false et v-bind="$attrs".

Dans le dossier public/ pour les fichiers servis tels quels, ou dans src/assets/ pour ceux traités par le bundler (bonne réponse)
Uniquement à la racine du projet
Dans un dossier static/
Sur un serveur externe obligatoirement

Explication : public/ : fichiers servis directement, sans traitement (ex: favicon.ico). Référencés par chemin absolu (/image.png). src/assets/ : fichiers traités par Vite (optimisation, hash dans le nom). Importés dans le code (import logo from "./assets/logo.png").

Utilisez src/assets/ pour les images qui font partie de l'application (optimisation automatique). Utilisez public/ pour les fichiers qui doivent garder leur nom (robots.txt).