Test technique VueJS | QCM & Quiz – Partie 28

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. Dans Vue.js, quelle méthode permet de changer la valeur d’une propriété réactive ?

A this.$set()

B this.$change()

C this.$update()

D this.$updateProperty()

A
Dans Vue.js, la méthode this.$set() permet de modifier de manière réactive une propriété d’un objet ou d’un tableau. Cela est particulièrement utile lorsque vous ajoutez de nouvelles propriétés à un objet réactif ou que vous modifiez un élément d’un tableau. Vue.js ne peut pas détecter directement les ajouts de nouvelles propriétés à un objet ou les changements dans un tableau à moins que vous n’utilisiez this.$set().

 

 

2. Que fait la directive v-bind:href dans Vue.js ?

A Elle crée un lien dynamique à un composant.

B Elle lie dynamiquement l’attribut href d’un élément.

C Elle ajoute un événement sur un lien.

D Elle modifie l’URL d’un composant.

B
La directive v-bind:href dans Vue.js est utilisée pour lier dynamiquement la valeur de l’attribut href d’un élément <a>, ce qui permet de lier une URL à cet attribut de manière réactive. Cela signifie que si la valeur du lien change dans les données ou les props, l’URL de l’élément <a> sera automatiquement mise à jour.

 

 

3. Dans Vue.js, que fait la méthode created() ?

A Elle exécute du code avant que le DOM soit monté.

B Elle initialise les données avant que le composant ne soit créé.

C Elle est appelée après que les composants soient montés.

D Elle met à jour l’état global de l’application.

A
La méthode created() dans Vue.js est un hook de cycle de vie qui est appelé après que l’instance du composant a été créée, mais avant que le DOM ne soit monté et affiché à l’écran. C’est à ce moment-là que vous pouvez accéder aux données réactives (comme celles définies dans data) et exécuter des logiques initiales, mais le DOM n’est pas encore disponible.

 

 
 

4. Quel est l’objectif de l’option data dans un composant Vue ?

A Contenir les props d’un composant.

B Contenir des données réactives propres au composant.

C Créer un template dynamique.

D Ajouter des événements personnalisés.

B
L’option data dans un composant Vue est utilisée pour déclarer des données réactives propres à ce composant. Ces données sont accessibles au sein du composant et peuvent être utilisées pour afficher du contenu dynamique dans le template. Lorsque ces données changent, Vue met à jour automatiquement le DOM pour refléter ces changements.

 

 

5. Quel est le rôle de v-on:keydown dans Vue.js ?

A Exécuter une méthode lors de la pression d’une touche du clavier.

B Appliquer un style dynamique en fonction de la touche pressée.

C Lier un événement au composant enfant.

D Lier des props au clavier.

A
La directive v-on:keydown dans Vue.js est utilisée pour lier un événement de clavier à une méthode dans votre composant. Cet événement est déclenché lorsqu’une touche est enfoncée dans un élément HTML (comme un champ de saisie ou un autre élément interactif). Cela permet d’exécuter une fonction (méthode) en réponse à cet événement.

 

 

6. Que permet v-on:click dans Vue.js ?

A Lier une fonction à un événement de clic.

B Appliquer une transition sur un élément lors du clic.

C Modifier la valeur d’un input au clic.

D Créer un composant dynamique lors du clic.

A
La directive v-on:click dans Vue.js permet de lier un événement de clic sur un élément HTML (comme un bouton ou un div) à une méthode ou une fonction dans le composant Vue. Lorsqu’un utilisateur clique sur l’élément, la méthode associée à cet événement est exécutée.

 

 
 

7. Comment créer un composant Vue dynamique en fonction des props ?

A Utiliser v-for pour itérer sur les composants.

B Définir le composant dans un slot et passer les props.

C Utiliser is pour lier dynamiquement un composant au template.

D Passer un composant comme template dynamique dans une méthode.

C
Dans Vue.js, pour créer un composant dynamique en fonction des props, on utilise la directive is. Cela permet de rendre un composant différent en fonction de la valeur d’une prop ou d’une donnée.

 

 

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

A Crée une transition lors du survol d’un élément.

B Lier un événement au survol d’un élément.

C Change l’opacité d’un élément au survol.

D Modifie une propriété dynamique en fonction du survol.

B
La directive v-on:mouseenter dans Vue.js permet de lier un événement mouseenter (qui se déclenche lorsque la souris entre dans l’élément ciblé) à une méthode ou à une fonction dans votre composant Vue. Cela permet d’exécuter une action spécifique lorsqu’un utilisateur survole un élément avec la souris.

 

 

9. Que fait v-for="(value, index) in array" dans Vue.js ?

A Itère sur un tableau ou un objet et affiche les éléments.

B Crée un composant dynamique pour chaque élément.

C Crée un événement pour chaque index du tableau.

D Lier un style dynamique au tableau d’éléments.

A
La directive v-for dans Vue.js permet d’itérer sur un tableau ou un objet, et d’afficher chaque élément dans le DOM. Elle est très utile pour rendre dynamiquement une liste d’éléments.

 

 
 

10. Quel est l’objectif principal des « computed properties » ?

A Calculer et mettre en cache des valeurs dérivées d’autres propriétés.

B Modifier les props de manière dynamique.

C Appliquer des animations aux propriétés.

D Lier des slots dynamiques à une propriété.

A
Les « computed properties » dans Vue.js sont des propriétés calculées qui dépendent d’autres propriétés réactives. Elles sont utilisées pour calculer des valeurs dérivées à partir de données ou de props et sont mises en cache en fonction de leurs dépendances. Cela signifie que si les propriétés dont elles dépendent ne changent pas, la valeur de la « computed property » ne sera pas recalculée.

 

 

Laisser un commentaire

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