Test technique VueJS | QCM & Quiz – Partie 8

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. Quelle directive permet de lier un événement comme click ou submit à une méthode dans Vue.js ?

A v-bind

B v-click

C v-on

D v-event

Réponse  

2. Quelle est la différence principale entre les méthodes et les propriétés calculées (computed) dans Vue.js ?

A Les méthodes sont recalculées à chaque rendu, tandis que les propriétés calculées sont mises en cache.

B Les propriétés calculées sont utilisées uniquement pour lier des données à des attributs HTML, tandis que les méthodes gèrent la logique.

C Les méthodes ne peuvent pas être réactives, tandis que les propriétés calculées le sont.

D Il n’y a aucune différence, ce sont deux façons de manipuler les données.

Réponse  

3. Que fait le code VueJS suivant ?

new Vue({
  el: '#app',
  data: {
    message: 'Bonjour Vue.js!'
  }
})

A Il affiche « Bonjour Vue.js! » dans la console.

B Il affiche « Bonjour Vue.js! » sur la page web.

C Il crée une nouvelle instance Vue sans utiliser l’élément DOM.

D Il crée une nouvelle instance Vue avec un message dynamique dans le data.

Réponse  
 

4. Quelle méthode Vue.js permet de déclencher une mise à jour forcée du DOM ?

A Vue.forceUpdate()

B this.$nextTick()

C this.$forceUpdate()

D this.$update()

Réponse  

5. Que fait le code VueJS suivant ?

<div>
  <button @click="count++">Incrementer</button>
  <p>{{ count }}</p>
</div>

export default {
  data() {
    return {
      count: 0
    }
  }
}

A Il incrémente une variable count à chaque clic sur le bouton et affiche sa valeur.

B Il crée une alerte avec la valeur de count à chaque clic.

C Il affiche une erreur car count n’est pas initialisé.

D Il crée une variable count avec une valeur initiale de 0 mais ne l’affiche pas.

Réponse  

6. Comment ajouter un « computed property » dans un composant Vue.js ?

A En utilisant la directive v-compute

B En définissant une méthode dans l’objet methods

C En créant une propriété dans l’objet computed

D En ajoutant une fonction dans l’objet data

Réponse  
 

7. Quelle est la différence entre props et data dans Vue.js ?

A Les props sont utilisées pour la gestion de l’état local, tandis que les data sont utilisées pour la gestion de l’état global.

B Les props permettent de passer des données d’un composant parent à un composant enfant, tandis que les data sont pour l’état interne d’un composant.

C Les props peuvent être modifiées par le composant enfant, tandis que les data ne peuvent pas l’être.

D Les props et les data sont interchangeables et remplissent le même rôle.

Réponse  

8. Que fait le code VueJS suivant ?

<div>
  <input v-model="message" placeholder="Tapez quelque chose">
  <p>{{ message }}</p>
</div>

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

A Il n’affiche rien car message n’est pas mis à jour.

B Il crée un champ de texte et un paragraphe mais ne fait rien d’autre.

C Il lie l’entrée de texte à la variable message, mais la mise à jour du texte ne se fait pas en temps réel.

D Il lie l’entrée de texte à la variable message et affiche le texte dans le paragraphe.

Réponse  

9. Quel est l’intérêt de la méthode mounted() dans un composant Vue.js ?

A Initialiser les données du composant

B Effectuer des requêtes API après que le composant ait été monté dans le DOM

C Gérer l’état des événements

D Modifier le template du composant avant son rendu

Réponse  
 

10. Qu’est-ce que l’option watch permet de faire dans Vue.js ?

A Exécuter une fonction lorsque la page est rechargée

B Observer et réagir aux changements de données ou de propriétés

C Observer les événements émis par les composants enfants

D Créer des transitions d’animation pour les éléments DOM

Réponse