Test technique VueJS | QCM & Quiz – Partie 5

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 permet de faire le router de Vue.js ?

A Gérer les transitions entre les vues dans une application à page unique (SPA).

B Lier les événements à des méthodes dans le composant.

C Ajouter des directives personnalisées à des éléments HTML.

D Gérer la réactivité des données dans l’application.

Réponse  

2. Quelle est la méthode pour définir un mixins dans Vue.js ?

A computed: [...]

B data: [...]

C methods: [...]

D mixins: [...]

Réponse  

3. Comment ajouter un style dynamique à un élément avec Vue.js ?

A v-style="{ color: 'red' }"

B v-bind:style="{ color: 'red' }"

C v-bind:class="{ 'red': true }"

D v-style: "{ color: 'red' }"

Réponse  
 

4. Quelle est la principale utilisation de v-bind:class dans Vue.js ?

A Lier dynamiquement des classes CSS à un élément.

B Lier dynamiquement des événements à un élément.

C Modifier le DOM à partir d’une donnée.

D Lier une donnée à une propriété d’un élément HTML.

Réponse  

5. Que fait le code VueJS suivant ?

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

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
});

A Le texte affiché sera toujours Hello Vue!, peu importe la valeur de message.

B Le code génère une erreur car reversedMessage ne peut pas être une propriété calculée.

C Vue.js ne réagira pas aux changements de message car la propriété calculée n’est pas utilisée correctement.

D Le texte affiché dans le paragraphe sera la version inversée de message, donc !euV olleH.

Réponse  

6. Quelle directive Vue.js est utilisée pour gérer les événements du DOM de manière simplifiée ?

A v-watch

B v-bind

C v-on

D v-model

Réponse  
 

7. Quel est le rôle du mounted() dans le cycle de vie d’un composant Vue ?

A Il est appelé lorsque l’instance Vue est créée, avant que le DOM ne soit monté.

B Il est appelé après que l’instance Vue a été montée sur le DOM.

C Il est appelé lorsque l’instance Vue est détruite.

D Il est appelé chaque fois qu’une donnée est modifiée dans le composant.

Réponse  

8. Comment définir une propriété calculée qui dépend de plusieurs autres données dans Vue.js ?

A computed: { fullName() { return this.firstName + this.lastName } }

B data: { fullName() { return this.firstName + this.lastName } }

C methods: { fullName() { return this.firstName + this.lastName } }

D watch: { fullName() { return this.firstName + this.lastName } }

Réponse  

9. Que fait le code VueJS suivant ?

<div id="app">
  <button @click="count++">Incrementer</button>
</div>

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`La valeur de count est passée de ${oldVal} à ${newVal}`);
    }
  }
});

A Le bouton ne fait rien, car watch n’est pas un mécanisme qui fonctionne avec les événements.

B Lorsqu’on clique sur le bouton, la valeur de count reste à zéro.

C Lorsqu’on clique sur le bouton, le count est incrémenté, et un message est affiché dans la console indiquant la valeur précédente et la nouvelle valeur.

D La fonction watch est incorrecte, et le code va générer une erreur.

Réponse  
 

10. Que fait la fonction destroy() dans Vue.js ?

A Elle détruit un composant enfant.

B Elle nettoie et détruit un composant Vue, en supprimant tous les listeners et en désactivant la réactivité.

C Elle rafraîchit le DOM et recharge les données.

D Elle supprime une directive du DOM.

Réponse