Test technique VueJS | QCM & Quiz – Partie 10

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. A quoi sert Vue Devtools ?

A Gérer l’état global des composants Vue.js

B Analyser et déboguer les applications Vue.js dans le navigateur

C Compiler les fichiers .vue en JavaScript

D Automatiser les tests unitaires dans Vue.js

Réponse  

2. Qu’est-ce que le Vuex store ?

A Un composant de gestion de l’interface utilisateur

B Un système pour gérer les routes de l’application

C Un gestionnaire centralisé pour l’état de l’application

D Un ensemble d’outils pour gérer les animations dans Vue.js

Réponse  

3. Que fait le code VueJS suivant ?

<div>
  <p>{{ uppercaseMessage }}</p>
</div>

export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  computed: {
    uppercaseMessage() {
      return this.message.toUpperCase();
    }
  }
}

A Il affiche une erreur car message n’est pas initialisé.

B Il génère une erreur car la méthode uppercaseMessage est utilisée de manière incorrecte.

C Il affiche la valeur de message sans la modifier.

D Il affiche la valeur de message en majuscules.

Réponse  
 

4. Quelle méthode Vue.js permet de changer l’état d’un composant sans provoquer de re-render ?

A this.$forceUpdate()

B this.$set()

C this.$nextTick()

D this.$emit()

Réponse  

5. Quel est le rôle de Vue Router dans une application Vue.js ?

A Gérer l’état de l’application

B Gérer les transitions d’animation entre les composants

C Gérer les routes et la navigation entre les vues de l’application

D Gérer la logique métier des composants

Réponse  

6. Que permet de faire le v-model avec un checkbox dans Vue.js ?

A Lier une valeur booléenne à l’état de la case à cocher

B Lier une méthode de validation à la case à cocher

C Lier une donnée au texte affiché à côté de la case à cocher

D Créer une relation entre plusieurs cases à cocher

Réponse  
 

7. Que fait le code VueJS suivant ?

<div>
  <p v-for="item in items" :key="item">{{ item }}</p>
  <button @click="addItem">Ajouter un élément</button>
</div>

export default {
  data() {
    return {
      items: ['Item 1', 'Item 2']
    }
  },
  methods: {
    addItem() {
      this.items.push('Item ' + (this.items.length + 1));
    }
  }
}

A Chaque fois que le bouton est cliqué, un nouvel élément est ajouté à la liste, mais la vue ne se met pas à jour.

B Le bouton permet d’ajouter un élément à la liste et la vue est mise à jour pour refléter ces changements.

C Le bouton ne fait rien car addItem n’est pas correctement liée à l’élément DOM.

D La vue ne met pas à jour correctement la liste après avoir ajouté un élément.

Réponse  

8. Quelle option dans Vue.js permet de spécifier les données qui doivent être envoyées entre un composant parent et un composant enfant ?

A methods

B data

C props

D computed

Réponse  

9. Quelle méthode Vue.js permet de déclencher une action après que le DOM a été mis à jour ?

A updated()

B mounted()

C beforeMount()

D created()

Réponse  
 

10. Quelle est la principale différence entre Vue.js 2.x et Vue.js 3.x ?

A Vue 3 ne supporte pas les composants enfants.

B Vue 3 offre une meilleure performance et un nouveau système de composition avec les Composition API.

C Vue 3 n’a pas de support pour le routage.

D Vue 3 ne prend pas en charge l’état global via Vuex.

Réponse