Test technique VueJS | QCM & Quiz – Partie 14

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. Qu’est-ce que la fonctionnalité de scoped slots dans Vue.js ?

A Permet de lier un slot à une valeur unique dans le composant enfant

B Permet d’appliquer des styles conditionnels dans un composant

C Permet de passer des données dynamiques à un slot de composant

D Permet de lier des événements à des slots spécifiques

Réponse  

2. Quelle est la différence entre un composant global et un composant local dans Vue.js ?

A Un composant global est accessible partout dans l’application, tandis qu’un composant local est uniquement accessible dans le composant où il est importé.

B Un composant global ne peut pas avoir d’état, tandis qu’un composant local peut en avoir.

C Un composant local ne peut pas avoir de props, contrairement à un composant global.

D Un composant global est plus performant que le composant local.

Réponse  

3. Que fait le code VueJS suivant ?

<div>
  <button @click="toggle">Toggle</button>
  <p>{{ message }}</p>
</div>

export default {
  data() {
    return {
      message: 'Hello',
      isToggled: false
    }
  },
  methods: {
    toggle() {
      this.isToggled = !this.isToggled;
      this.message = this.isToggled ? 'Goodbye' : 'Hello';
    }
  }
}

A Le texte reste toujours « Hello », même après avoir cliqué sur le bouton.

B Le texte reste toujours « Goodbye », même après avoir cliqué sur le bouton.

C Le bouton ne modifie pas la valeur de message.

D Le texte change entre « Hello » et « Goodbye » chaque fois que le bouton est cliqué.

Réponse  
 

4. Quelle est la méthode qui permet d’ajouter un élément à un tableau réactif dans Vue.js ?

A this.$set()

B this.push()

C this.$add()

D this.insert()

Réponse  

5. Quelle est la méthode pour naviguer programmétiquement dans Vue Router ?

A this.$router.push()

B this.$navigate()

C this.$route.go()

D this.$navigateTo()

Réponse  

6. Comment Vue.js gère-t-il les événements personnalisés entre composants ?

A Les événements personnalisés sont gérés via v-model.

B Les composants enfants émettent des événements via this.$emit(), et les composants parents les écoutent via v-on.

C Vue ne permet pas d’événements personnalisés.

D Les événements personnalisés sont gérés par this.$event().

Réponse  
 

7. Que fait le code VueJS suivant ?

<div>
  <p v-if="isLoggedIn">Bienvenue, utilisateur !</p>
  <p v-else>Veuillez vous connecter.</p>
</div>

export default {
  data() {
    return {
      isLoggedIn: false
    }
  }
}

A Si isLoggedIn est true, le message « Bienvenue, utilisateur ! » est affiché. Sinon, « Veuillez vous connecter. » est affiché.

B Le message « Bienvenue, utilisateur ! » est toujours affiché.

C Le message « Veuillez vous connecter. » est toujours affiché.

D Il n’y a pas de changement visible, car isLoggedIn est false par défaut.

Réponse  

8. Comment définir une route dynamique dans Vue Router ?

A En changeant la clé path dans l’objet de configuration de Vue Router.

B En créant un tableau d’URL préconfigurées dans router.push().

C En utilisant this.$route pour paramétrer dynamiquement la route.

D En utilisant des paramètres dans l’URL comme /user/:id.

Réponse  

9. Quelle méthode permet de rendre un composant Vue asynchrone (chargé à la demande) ?

A Vue.component()

B Vue.asyncComponent()

C defineAsyncComponent()

D import() avec defineComponent()

Réponse  
 

10. Comment gérer les erreurs dans les hooks de Vue.js ?

A Utiliser Vue.config.errorHandler pour gérer les erreurs globalement.

B Les erreurs dans les hooks sont automatiquement envoyées au serveur pour traitement.

C Utiliser la méthode this.$error() pour capturer les erreurs.

D Les erreurs dans les hooks sont ignorées et n’affectent pas le flux de l’application.

Réponse