Test technique VueJS | QCM & Quiz – Partie 19

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 pouvez-vous employer des watchers dans Vue.js ?

A En utilisant computed pour observer des changements.

B En utilisant methods pour écouter les changements de données.

C En définissant un watcher sur une donnée dans la section watch de l’instance Vue.

D En utilisant v-on pour observer les événements.

Réponse  

2. Comment pouvez-vous accéder à une donnée dans un composant parent à partir d’un composant enfant dans Vue.js ?

A En utilisant this.$parent

B En utilisant this.$refs

C En utilisant this.$store

D En utilisant this.$root

Réponse  

3. Quelle est la bonne syntaxe pour passer des props à un composant enfant dans Vue.js ?

A <child-component prop="value"/>

B <child-component v-bind:prop="value"/>

C <child-component :prop="value"/>

D <child-component prop="value"></child-component>

Réponse  
 

4. Que permet de faire le keep-alive dans Vue.js ?

A Il permet de maintenir un composant en mémoire après qu’il ait été détruit.

B Il permet d’afficher un composant en fonction des données de l’utilisateur.

C Il permet de gérer la réactivité des données dans un composant.

D Il permet d’optimiser le rendu des composants dans le DOM.

Réponse  

5. Que fait le code VueJS suivant ?

<div>
  <p v-for="(item, index) in items" :key="index">{{ item }}</p>
</div>

export default {
  data() {
    return {
      items: ['apple', 'banana', 'cherry']
    }
  }
}

A Affiche chaque élément de la liste items sous forme de texte, un par un.

B Affiche uniquement le dernier élément de items.

C Affiche une erreur, car v-for nécessite un attribut key.

D Le tableau items reste vide, donc aucun texte n’est affiché.

Réponse  

6. Quelle directive de Vue.js permet de répéter un élément pour chaque élément d’un tableau ?

A v-repeat

B v-foreach

C v-if

D v-for

Réponse  
 

7. Quel est l’objectif principal de la directive v-bind:style ?

A Lier dynamiquement une classe CSS à un élément HTML.

B Lier dynamiquement une propriété CSS à un élément HTML.

C Appliquer une fonction JavaScript au style de l’élément.

D Modifier le style d’un élément après sa création.

Réponse  

8. Comment déclare-t-on une fonction asynchrone dans un composant Vue.js ?

A async function myMethod() {}

B methods: { async myMethod() {}}

C myMethod: async function() {}

D methods: { myMethod: async function() {}}

Réponse  

9. Que signifie la syntaxe :key="item.id" dans Vue.js ?

A Il lie la clé item.id à une donnée dans le composant.

B Elle permet de forcer le rafraîchissement de l’élément en cas de changement.

C Elle est utilisée pour améliorer la réactivité des composants.

D Elle spécifie un identifiant unique pour chaque élément dans une liste rendue.

Réponse  
 

10. Quelle est la méthode pour envoyer une mutation Vuex ?

A this.$store.dispatch()

B this.$store.commit()

C this.$store.mutate()

D this.$store.emit()

Réponse