Test technique VueJS | QCM & Quiz – Partie 9

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 gérer une erreur dans une promesse dans Vue.js ?

A En utilisant catch() après la promesse

B En utilisant la méthode error() dans le code

C En créant un try...catch autour de la promesse

D En utilisant la directive v-error

Réponse  

2. Que fait le code VueJS suivant ?

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

export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Cherry']
    }
  }
}

A La liste affiche chaque élément avec son indice, mais sans ordonner les éléments.

B La liste affiche chaque élément avec son indice dans l’ordre inverse.

C Le v-for est incorrect car il manque une clé unique.

D Le texte n’est pas affiché en raison d’une erreur dans le code.

Réponse  

3. Comment déclarer un composant enfant dans Vue.js ?

A En utilisant la directive v-child

B En utilisant components: {} dans l’objet du composant parent

C En utilisant props dans le composant parent

D En utilisant v-for dans le composant parent

Réponse  
 

4. Que fait le code VueJS suivant ?

<div>
  <button @click="showAlert">Afficher alerte</button>
</div>

export default {
  methods: {
    showAlert() {
      alert('Hello, Vue!');
    }
  }
}

A Affiche un message dans la console lorsque le bouton est cliqué.

B Affiche le message « Hello, Vue! » dans la page web.

C Il n’affiche rien.

D Affiche une alerte avec le message « Hello, Vue! » lorsque le bouton est cliqué.

Réponse  

5. Que fait le code VueJS suivant ?

<div>
  <input v-model="username" />
  <p v-if="username.length > 5">Nom d'utilisateur valide</p>
  <p v-else>Nom d'utilisateur trop court</p>
</div>

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

A Affiche « Nom d’utilisateur valide » lorsque la longueur du nom d’utilisateur est supérieure à 5.

B Affiche « Nom d’utilisateur trop court » si la longueur du nom d’utilisateur est inférieure ou égale à 5.

C Affiche un message d’erreur si le nom d’utilisateur est trop court.

D A et B sont corrects.

Réponse  

6. Quel est l’objectif du Vue CLI ?

A Créer des applications Vue.js sans configuration préalable

B Compiler des fichiers Vue.js en JavaScript natif

C Gérer la logique des composants

D Ajouter des effets CSS dans les applications Vue.js

Réponse  
 

7. Comment peut-on éviter un render d’un composant enfant lorsqu’il n’y a pas de changement de données ?

A En utilisant la directive v-once

B En utilisant v-no-render

C En utilisant v-bind

D En utilisant v-skip

Réponse  

8. Que fait le code VueJS suivant ?

<div>
  <p v-bind:style="{ color: textColor }">Ceci est un texte coloré.</p>
  <button @click="changeColor">Changer la couleur</button>
</div>

export default {
  data() {
    return {
      textColor: 'blue'
    }
  },
  methods: {
    changeColor() {
      this.textColor = this.textColor === 'blue' ? 'red' : 'blue';
    }
  }
}

A Le texte sera toujours bleu.

B Le texte sera toujours rouge.

C Le texte change de couleur entre bleu et rouge à chaque clic sur le bouton.

D La couleur du texte ne changera jamais.

Réponse  

9. Quelle est la fonctionnalité de $refs dans Vue.js ?

A Gérer les erreurs dans l’application

B Accéder directement aux éléments DOM ou aux composants enfants via une référence

C Lier des données entre les composants parent et enfant

D Créer des écouteurs d’événements personnalisés

Réponse  
 

10. Que fait la méthode beforeDestroy dans Vue.js ?

A Elle est appelée avant que le composant soit monté dans le DOM.

B Elle est appelée avant que le composant soit détruit, pour effectuer des tâches de nettoyage.

C Elle est appelée lorsque le composant est visible à l’écran.

D Elle est utilisée pour gérer les erreurs dans le composant.

Réponse