Test technique VueJS | QCM & Quiz – Partie 17

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 définir une prop dans un composant Vue.js ?

A En utilisant props dans le tableau des options du composant.

B En utilisant data dans le tableau des options du composant.

C En utilisant methods dans le tableau des options du composant.

D En utilisant computed dans le tableau des options du composant.

Réponse  

2. Quelle méthode permet de naviguer entre les pages dans une application Vue.js utilisant Vue Router ?

A this.$navigate()

B this.$route.navigate()

C this.router.navigate()

D this.$router.push()

Réponse  

3. Comment pouvez-vous passer une fonction de rappel (callback) à un composant enfant dans Vue.js ?

A En utilisant v-bind pour lier la fonction à une prop.

B En utilisant v-on pour écouter l’événement.

C En passant la fonction comme une propriété methods.

D En utilisant @callback dans le template de l’enfant.

Réponse  
 

4. Que fait le code VueJS suivant ?

<div>
  <button @click="addToCart">Ajouter au panier</button>
  <p>{{ cart.length }} articles dans le panier</p>
</div>

export default {
  data() {
    return {
      cart: []
    }
  },
  methods: {
    addToCart() {
      this.cart.push('Item');
    }
  }
}

A Le bouton ajoute un article au panier à chaque clic, et le texte affiche le nombre d’articles dans le panier.

B Le texte « 0 articles dans le panier » ne change jamais.

C La méthode addToCart ne fonctionne pas et ne modifie pas le panier.

D Le bouton ne fonctionne pas car la méthode addToCart est mal définie.

Réponse  

5. Quelle méthode de Vuex est utilisée pour communiquer avec des actions asynchrones ?

A commit()

B dispatch()

C update()

D state()

Réponse  

6. Quelle directive est utilisée pour lire et appliquer des styles dynamiques dans Vue.js ?

A v-show

B v-bind:style

C v-for

D v-if

Réponse  
 

7. Dans Vue.js, que représente l’objet $route ?

A Il représente un événement qui se déclenche lors de chaque changement de route.

B Il contient des informations sur la route active, comme les paramètres, la query string et le chemin.

C Il est utilisé pour enregistrer les composants de route dans l’application.

D Il permet de manipuler directement l’URL dans le navigateur.

Réponse  

8. Que fait le code VueJS suivant ?

<div>
  <p>{{ reversedArray }}</p>
</div>

export default {
  data() {
    return {
      items: ['apple', 'banana', 'cherry']
    }
  },
  computed: {
    reversedArray() {
      return [...this.items].reverse();
    }
  }
}

A Affiche les éléments de items dans l’ordre inverse.

B Affiche les éléments de items sans modification.

C Affiche une erreur car reverse ne fonctionne pas sur un tableau.

D Affiche une version modifiée de items sans inverser l’ordre des éléments.

Réponse  

9. Quelle est la bonne méthode pour effectuer une mutation dans Vuex ?

A this.$store.commit()

B this.$store.dispatch()

C this.$store.update()

D this.$store.state()

Réponse  
 

10. Quelle directive est utilisée pour lancer un événement personnalisé dans Vue.js ?

A v-emit

B v-model

C v-bind

D v-on

Réponse