WayToLearnX

WayToLearnX

qcm-vuejs-test-technique
QCM VueJS 

Test technique VueJS | QCM & Quiz – Partie 31

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 vous utilisez v-for sans spécifier une clé (key) ?

A Vue pourrait rencontrer des problèmes de performance en manipulant les éléments.

B La liste ne sera pas rendue correctement.

C Les éléments seront triés automatiquement par Vue.

D Un avertissement sera affiché si des clés ne sont pas spécifiées.

A
Lorsque vous utilisez v-for dans Vue.js pour itérer sur une liste d’éléments, il est fortement recommandé de spécifier une clé (key) unique pour chaque élément. Cette clé permet à Vue de mieux suivre les éléments lorsqu’ils sont ajoutés, supprimés ou réordonnés dans la liste.

Sans une clé, Vue doit recourir à une stratégie plus coûteuse pour déterminer quel élément doit être mis à jour, ce qui peut entraîner des problèmes de performance, surtout dans des listes longues.

 

 

2. Comment ajouter une méthode dans un composant Vue.js ?

A Ajouter directement une méthode dans l’élément HTML.

B Créer une prop dynamique pour chaque méthode.

C Utiliser l’option data pour déclarer des méthodes.

D Utiliser l’option methods dans la définition du composant.

D
Dans Vue.js, les méthodes sont définies à l’intérieur de l’option methods du composant. Cela permet de déclarer des fonctions que vous pourrez ensuite appeler dans les événements du composant ou dans des autres méthodes de l’application.

 

 

3. Qu’est-ce qu’une directive dans Vue.js ?

A Une fonction qui applique des comportements sur le DOM.

B Un composant qui gère des événements personnalisés.

C Une propriété réactive liée à une donnée.

D Une fonction asynchrone de gestion d’événements.

A
Dans Vue.js, une directive est un marqueur spécial dans le DOM qui ajoute un comportement particulier à un élément ou une composant. Les directives sont préfixées par v-, comme v-if, v-for, v-bind, etc. Elles permettent de manipuler le DOM de manière réactive en fonction de l’état de l’application.

 

 
 

4. Comment peut-on mettre à jour une propriété dans un composant enfant depuis le parent ?

A Modifier directement la prop dans le composant enfant.

B Utiliser this.$emit() pour envoyer une mise à jour vers le parent.

C Utiliser une méthode dans le composant enfant et l’appeler depuis le parent.

D Passer un slot dynamique pour modifier la propriété.

C
Dans Vue.js, les props sont des données transmises du parent vers l’enfant. Si vous souhaitez mettre à jour une propriété dans un composant enfant depuis le parent, la meilleure approche est de définir une méthode dans le composant enfant qui permet de mettre à jour cette propriété, puis appeler cette méthode depuis le parent.

 

 

5. Que fait v-bind:disabled sur un bouton ?

A Désactive le bouton en fonction d’une condition dynamique.

B Applique un style à un bouton désactivé.

C Modifie le texte du bouton selon les données.

D Crée un événement personnalisé au clic sur le bouton.

A
En Vue.js, v-bind:disabled est utilisé pour lier dynamiquement l’attribut disabled d’un élément, comme un bouton, à une donnée ou une expression. Cela permet de contrôler l’état activé ou désactivé du bouton en fonction de la valeur de cette donnée.

 

 

6. Quel est le rôle de v-for="(value, key) in object" ?

A Itérer sur les clés et valeurs d’un objet.

B Appliquer un style dynamique aux éléments d’un objet.

C Filtrer les valeurs d’un objet avant l’affichage.

D Créer un événement personnalisé pour chaque clé.

A
En Vue.js, la directive v-for="(value, key) in object" est utilisée pour itérer sur les propriétés d’un objet. Dans cet exemple, value représente la valeur associée à chaque clé, et key est la clé de chaque propriété de l’objet.

 

 
 

7. Que fait v-bind:src sur une image ?

A Appliquer un style dynamique à l’image.

B Modifier le contenu de l’image après sa charge.

C Lier dynamiquement la source de l’image à une donnée.

D Créer une transition lors du changement de l’image.

C
En Vue.js, v-bind:src permet de lier dynamiquement l’attribut src d’une image à une donnée ou une expression. Cela permet de changer la source de l’image en fonction de l’état ou des données de l’application.

 

 

8. Que fait v-model.lazy ?

A Retarde l’application d’un style dynamique après saisie.

B Crée un comportement réactif immédiat lors de la saisie.

C Valide l’entrée de l’utilisateur immédiatement.

D Retarde la mise à jour de la donnée jusqu’à la perte de focus.

D
En Vue.js, v-model.lazy est une version modifiée de la directive v-model qui permet de retarder la mise à jour de la donnée liée jusqu’à ce que l’élément perde le focus (au lieu de la mettre à jour immédiatement après chaque modification de l’entrée).

Cela peut être utile pour éviter des mises à jour trop fréquentes de la donnée pendant que l’utilisateur est en train de saisir des informations.

 

 

9. Que fait v-on:mouseenter dans Vue.js ?

A Crée un slot pour l’événement de survol.

B Applique un style dynamique lors du survol.

C Empêche l’élément d’être cliqué.

D Capture l’événement de survol de l’élément.

D
En Vue.js, v-on:mouseenter est utilisé pour écouter l’événement mouseenter, qui se déclenche lorsque le pointeur de la souris entre dans l’élément ciblé. Cela permet d’exécuter une méthode ou une action spécifique lorsqu’un utilisateur survole l’élément.

 

 
 

10. Quel est le but de v-bind:disabled sur un champ de formulaire ?

A Change la valeur du champ en fonction des données.

B Désactive dynamiquement le champ selon une condition.

C Active le champ en fonction d’un événement.

D Applique un style au champ lorsqu’il est désactivé.

B
En Vue.js, v-bind:disabled permet de lier dynamiquement l’attribut disabled d’un champ de formulaire à une donnée ou à une expression. Cela permet de contrôler si le champ est activé ou désactivé en fonction d’une condition.

 

 
QCMs qui pourraient vous intéresser :

Vous pourrez aussi aimer

qcm-vuejs-test-technique

Test technique VueJS | QCM & Quiz – Partie 9

Thomas 0
qcm-vuejs-test-technique

Test technique VueJS | QCM & Quiz – Partie 7

Thomas 0
qcm-vuejs-test-technique

Test technique VueJS | QCM & Quiz – Partie 27

Thomas 0

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *