Test technique VueJS | QCM & Quiz – Partie 6

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. Comment déclarer un « mixin » dans Vue.js ?

A En utilisant mixins: [...] dans un composant Vue.

B En utilisant mixin: {...} dans un composant Vue.

C En utilisant data: {...} dans un composant Vue.

D En utilisant computed: {...} dans un composant Vue.

Réponse  

2. Que fait le code VueJS suivant ?

<div id="app">
  <button @click="isVisible = !isVisible">Toggle Visibility</button>
  <p v-show="isVisible">Ce texte peut être caché.</p>
</div>

new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
});

A Vue.js génère une erreur car v-show ne peut pas être utilisé sur un élément <p>.

B Le texte reste toujours visible, même si isVisible est mis à false.

C Le texte dans le paragraphe est complètement supprimé du DOM lorsqu’on clique sur le bouton.

D Le texte dans le paragraphe est caché lorsqu’on clique sur le bouton, mais la place dans le DOM est toujours occupée.

Réponse  

3. Quelle directive Vue.js est utilisée pour lier un modèle de donnée à un élément du DOM ?

A v-model

B v-bind

C v-show

D v-for

Réponse  
 

4. Quel est le but de v-cloak dans Vue.js ?

A Il permet de lier un modèle de données à un élément du DOM.

B Il est utilisé pour cacher un élément jusqu’à ce que Vue.js ait fini de compiler le template.

C Il est utilisé pour effectuer des transitions d’éléments.

D Il permet d’attendre la réponse d’un appel API avant d’afficher un élément.

Réponse  

5. Que fait le code VueJS suivant ?

<div id="app">
  <p>{{ user.name }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    user: {
      name: 'Alice'
    }
  }
});

A Vue.js ne peut pas réagir aux modifications des propriétés imbriquées dans un objet.

B Vue.js affichera « undefined », car l’objet user n’est pas défini dans le DOM.

C Le texte affiché sera « Alice », car user.name est une propriété de l’objet user.

D Le code générera une erreur car Vue.js ne peut pas gérer les objets dans le data.

Réponse  

6. Que fait v-pre dans Vue.js ?

A Il permet d’ignorer un élément et son contenu lors du rendu.

B Il empêche un composant d’être monté.

C Il permet d’optimiser le rendu d’un élément en ne l’interprétant pas comme un template Vue.

D Il force le DOM à être mis à jour immédiatement.

Réponse  
 

7. Que fait le code VueJS suivant ?

<div id="app">
  <p>{{ message }}</p>
  <input v-bind:value="message" />
  <button @click="message = 'Nouvelle valeur'">Changer Message</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Valeur initiale'
  }
});

A Le texte dans le paragraphe sera « Valeur initiale », mais l’input restera vide même après un clic sur le bouton.

B Le bouton va générer une erreur car v-bind:value ne peut pas être utilisé avec un input.

C Le texte dans le paragraphe ne change jamais car il n’y a pas de liaison entre le bouton et la donnée.

D Le texte dans le paragraphe et l’input est initialement « Valeur initiale », et lorsque le bouton est cliqué, le texte change dans les deux éléments.

Réponse  

8. Quelle est la différence entre v-if et v-else dans Vue.js ?

A v-if est utilisé pour afficher un élément conditionnellement, tandis que v-else est utilisé pour afficher un autre élément quand la condition est fausse.

B v-if est utilisé pour les événements et v-else pour la réactivité.

C v-if et v-else sont utilisés ensemble, mais v-else ne peut être utilisé que seul.

D v-if est utilisé pour ajouter une classe conditionnelle, tandis que v-else est utilisé pour supprimer une classe.

Réponse  

9. Que fait le code VueJS suivant ?

<div id="app">
  <p>{{ fullName }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

A Le texte affiché sera « John Doe », car fullName est une propriété calculée qui concatène firstName et lastName.

B Le texte affiché sera « firstName lastName », car Vue.js ne reconnaît pas les propriétés calculées dans le modèle.

C Vue.js générera une erreur car fullName ne peut pas être calculé avec des données.

D Le texte affiché sera vide, car les données firstName et lastName ne sont pas liées correctement.

Réponse  
 

10. Quelle est la méthode pour envoyer des données d’un composant enfant vers un composant parent dans Vue.js ?

A En utilisant props

B En utilisant v-bind

C En utilisant this.$emit()

D En utilisant v-model

Réponse