Test technique VueJS | QCM & Quiz – Partie 18

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 récupérer les paramètres dynamiques d’une route dans Vue.js avec Vue Router ?

A this.$route.params

B this.$router.params

C this.$route.query

D this.$route.get()

Réponse  

2. Quel hook de cycle de vie est appelé avant que Vue.js ne modifie le DOM ?

A beforeUpdate()

B created()

C mounted()

D beforeMount()

Réponse  

3. Que fait le code VueJS suivant ?

<div>
  <button @click="changeMessage">Changer le message</button>
  <p>{{ message }}</p>
</div>

export default {
  data() {
    return {
      message: 'Bonjour, Vue.js !'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Message modifié!';
    }
  }
}

A Le message ne change pas, même lorsque le bouton est cliqué.

B Le bouton modifie le texte de message et affiche « Message modifié! ».

C Le texte du bouton change à chaque clic.

D Il y a une erreur dans la méthode changeMessage.

Réponse  
 

4. Dans Vue.js, quel hook de cycle de vie est appelé lorsque le composant est mis à jour ?

A beforeUpdate()

B updated()

C mounted()

D destroyed()

Réponse  

5. Quelle méthode permet de définir une donnée dans Vuex ?

A this.$store.commit()

B this.$store.set()

C this.$store.setData()

D this.$store.dispatch()

Réponse  

6. Quel est l’objectif principal du store dans Vuex ?

A Gérer les événements du DOM.

B Gérer l’état centralisé et partagé de l’application.

C Gérer les routes dans l’application.

D Gérer les composants enfants d’une page.

Réponse  
 

7. Que fait le code VueJS suivant ?

<div>
  <input v-model.trim="inputValue" />
  <p>{{ inputValue }}</p>
</div>

export default {
  data() {
    return {
      inputValue: ''
    }
  }
}

A La liaison v-model.trim n’a aucun effet et se comporte comme v-model normal.

B Le champ d’entrée permet de saisir plusieurs lignes de texte.

C L’entrée affichera une erreur, car trim ne fonctionne pas avec v-model.

D Le v-model.trim supprime les espaces avant et après la valeur de inputValue.

Réponse  

8. Quelle méthode permet de charger des données asynchrones dans Vue.js avant le montage du composant ?

A mounted()

B beforeMount()

C created()

D beforeCreate()

Réponse  

9. Quelle méthode permet de supprimer un composant enfant dans Vue.js ?

A this.$removeChild()

B this.$destroy()

C this.$unmount()

D this.$deleteChild()

Réponse  
 

10. Que fait v-on:click dans Vue.js ?

A Exécute une fonction lorsque l’événement click est déclenché sur l’élément.

B Permet de lier un style dynamique en fonction du clic.

C Modifie les données du composant lors d’un clic.

D Affiche un message lorsque l’élément est cliqué.

Réponse