Test technique VueJS | QCM & Quiz – Partie 30

mars 16, 2025mars 16, 2025 Thomas Aucun commentaire

Les QCM VueJS sont un excellent moyen de tester et d’approfondir vos connaissances sur ce puissant framework JavaScript. Que vous soyez débutant cherchant à maîtriser les bases ou développeur expérimenté souhaitant valider vos compétences techniques, nos quiz interactifs vous permettent d’évaluer votre compréhension de VueJS. Grâce à des questions ciblées sur des concepts clés comme les composants, la gestion d’état et les directives, ces tests vous aideront à progresser rapidement et à renforcer vos compétences en développement web.

1. Que se passe-t-il si un composant Vue reçoit une prop manquante ?

A Vue affiche un avertissement dans la console.

B Vue ignore la prop et applique des valeurs par défaut.

C Vue crée une nouvelle propriété pour compenser l’absence.

D Vue génère une erreur fatale et arrête l’exécution.

Si un composant Vue reçoit une prop manquante (c’est-à-dire que le parent ne lui fournit pas une valeur pour cette prop), Vue va afficher un avertissement dans la console (en mode développement). Vue ne lancera pas d’erreur fatale, mais elle indique que la prop est manquante. Si des valeurs par défaut sont définies pour la prop, elles seront utilisées à la place de la valeur manquante.

2. Que se passe-t-il si une propriété dans data est modifiée après le rendu initial ?

A Vue arrête de rendre le composant et le supprime du DOM.

B Vue lance une erreur car les données ne peuvent pas être modifiées après le rendu.

C Vue ignore la modification et ne met pas à jour l’affichage.

D Vue met à jour automatiquement le DOM pour refléter la modification.

Vue.js utilise un système réactif pour surveiller les données déclarées dans la fonction data(). Lorsque l’une de ces propriétés est modifiée après le rendu initial, Vue détecte cette modification et met automatiquement à jour le DOM pour refléter la nouvelle valeur. C’est l’un des principes clés du fonctionnement de Vue: la réactivité.

3. Comment créer un composant dynamique dans Vue.js ?

A En utilisant v-if pour afficher différents composants.

B En utilisant v-bind:is pour lier un composant à une variable.

C En passant des props au composant enfant.

D En ajoutant un slot dans le composant.

Dans Vue.js, il est possible de rendre un composant dynamique en utilisant la directive v-bind:is. Cette directive permet de lier dynamiquement un composant à une variable ou une expression. Cette fonctionnalité est particulièrement utile lorsqu’on veut rendre différents composants en fonction de certaines conditions ou de la valeur d’une variable.

4. Que signifie « réactivité » dans Vue.js ?

A Vue.js met à jour le DOM automatiquement lorsque les données changent.

B Vue.js surveille les événements de l’utilisateur en temps réel.

C Vue.js applique des styles dynamiques à chaque modification.

D Vue.js détecte les erreurs de code pendant l’exécution.

La réactivité dans Vue.js fait référence à la capacité de Vue à détecter les changements dans les données et à mettre automatiquement à jour le DOM pour refléter ces modifications. Cela signifie que lorsque vous modifiez une donnée dans votre application, Vue.js prend en charge la mise à jour de l’interface utilisateur en temps réel sans que vous ayez besoin de manipuler le DOM manuellement.

5. Comment associer un événement à un bouton avec Vue.js ?

A Utiliser v-on:click pour lier un événement de clic à une méthode.

B Utiliser v-model pour lier un événement à une variable.

C Utiliser v-bind pour appliquer une méthode à un bouton.

D Utiliser v-for pour créer un bouton dynamique.

Dans Vue.js, pour associer un événement, comme un clic sur un bouton, à une méthode, on utilise la directive v-on.

6. Qu’est-ce qu’une directive personnalisée dans Vue.js ?

A Une directive que l’on crée pour ajouter un comportement spécifique à un élément.

B Une directive qui lie un style dynamique à un élément.

C Une méthode permettant de créer des composants réutilisables.

D Une fonction utilisée pour modifier un événement.

Dans Vue.js, une directive personnalisée est une directive que vous créez pour ajouter un comportement ou une fonctionnalité particulière à un élément du DOM. Vue propose des directives intégrées telles que v-bind, v-if, et v-for, mais vous pouvez aussi créer vos propres directives personnalisées pour répondre à des besoins spécifiques.

Par exemple, une directive personnalisée pourrait être utilisée pour gérer un comportement spécifique lorsqu’un élément est cliqué, ou encore pour effectuer des animations lorsqu’un élément est ajouté au DOM.

7. Que permet de faire `v-on:keyup` ?

A Attacher un événement à un champ de formulaire.

B Appliquer un effet de transition à un élément.

C Modifier un style CSS après un événement de touche.

D Écouter l’événement lorsque la touche est relâchée.

Dans Vue.js, la directive v-on:keyup permet de lier une méthode ou un gestionnaire d’événements à l’événement keyup du clavier, c’est-à-dire lorsque la touche est relâchée après avoir été pressée. Cette directive est utilisée pour capturer l’événement de relâchement d’une touche et exécuter une fonction lorsque cela se produit.

8. Que fait `v-on:keydown` dans Vue.js ?

A Permet d’exécuter un méthode conditionnelle après chaque pression de touche.

B Applique une transition quand une touche est enfoncée.

C Écoute l’événement lorsqu’une touche est enfoncée sur un élément.

D Modifie un attribut lors d’une action clavier.

Dans Vue.js, v-on:keydown permet de lier un gestionnaire d’événements à l’événement keydown du clavier, qui se déclenche lorsque une touche est enfoncée (avant qu’elle ne soit relâchée). Cet événement est utile lorsque vous souhaitez réagir dès qu’une touche est pressée, avant que l’utilisateur ne la relâche.

9. Comment manipuler le DOM après chaque mise à jour dans Vue.js ?

A Utiliser this.$nextTick() pour exécuter du code après le rendu.

B Utiliser mounted() pour manipuler le DOM lors du montage.

C Utiliser created() pour manipuler le DOM avant le montage.

D Utiliser updated() pour chaque changement de donnée.

Dans Vue.js, this.$nextTick() permet d’exécuter une fonction après que le DOM a été mis à jour suite à des changements dans les données réactives. Cela permet de s’assurer que vous travaillez avec le DOM après la prochaine mise à jour de celui-ci, ce qui est utile si vous devez manipuler des éléments DOM ou effectuer des calculs qui dépendent de l’état actuel du DOM après qu’une modification de données ait eu lieu.

10. Comment ajouter un composant Vue.js à un élément HTML spécifique ?

A Utiliser new Vue({ el: '#app' }) pour lier un composant à un élément spécifique.

B Ajouter v-bind à l’élément HTML.

C Utiliser un slot dynamique dans le composant pour le lier à un élément.

D Appliquer v-for pour générer un composant au sein de l’élément.

Dans Vue.js, pour monter un composant sur un élément HTML spécifique, vous pouvez utiliser l’option el dans l’instance Vue pour spécifier l’élément DOM auquel le composant sera lié.

QCMs qui pourraient vous intéresser :

1. Que se passe-t-il si un composant Vue reçoit une prop manquante ?

2. Que se passe-t-il si une propriété dans data est modifiée après le rendu initial ?

3. Comment créer un composant dynamique dans Vue.js ?

4. Que signifie « réactivité » dans Vue.js ?

5. Comment associer un événement à un bouton avec Vue.js ?

6. Qu’est-ce qu’une directive personnalisée dans Vue.js ?

7. Que permet de faire v-on:keyup ?

8. Que fait v-on:keydown dans Vue.js ?

9. Comment manipuler le DOM après chaque mise à jour dans Vue.js ?

10. Comment ajouter un composant Vue.js à un élément HTML spécifique ?

Vous pourrez aussi aimer

Test technique VueJS | QCM & Quiz – Partie 26

Test technique VueJS | QCM & Quiz – Partie 6

Test technique VueJS | QCM & Quiz – Partie 25

Laisser un commentaire Annuler la réponse

7. Que permet de faire `v-on:keyup` ?

8. Que fait `v-on:keydown` dans Vue.js ?