Test technique VueJS | QCM & Quiz – Partie 16

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. Quand devez-vous utiliser created() plutôt que mounted() dans Vue.js ?

A Lorsque vous avez besoin de manipuler le DOM après le montage du composant.

B Lorsque vous avez besoin de récupérer des données avant que le composant ne soit monté.

C Lorsque vous souhaitez effectuer des calculs de mise en page après le montage du composant.

D Lorsque vous devez synchroniser des données externes avec un formulaire.

Réponse  

2. Que fait Vue.component() dans Vue.js ?

A Enregistre un composant localement pour un seul usage dans un autre composant.

B Crée un composant sans l’enregistrer dans Vue.js.

C Enregistre un composant globalement, le rendant accessible partout dans l’application.

D Permet de définir des propriétés personnalisées pour un composant.

Réponse  

3. Quelle méthode est utilisée pour lire des valeurs réactives dans Vue.js ?

A this.$data

B this.$props

C this.$store.state

D this.$route.params

Réponse  
 

4. Comment définir un composant enfant dans Vue.js ?

A En utilisant la méthode Vue.component() dans le parent.

B En utilisant la directive v-for pour afficher l’enfant.

C En créant un fichier de composant séparé et en l’importing dans le composant parent.

D En utilisant this.$child() pour créer un composant.

Réponse  

5. Que fait le code VueJS suivant ?

<div>
  <input v-model.number="age" />
  <p>{{ age }}</p>
</div>

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

A L’input permet uniquement de saisir des chaînes de caractères.

B Le v-model avec .number convertit la valeur de age en nombre lorsqu’une valeur est entrée.

C Le champ d’entrée n’affiche pas la valeur de age car la liaison bidirectionnelle est incorrecte.

D La directive v-model.number ne fonctionne pas avec des entrées de type number.

Réponse  

6. Comment afficher une erreur si une donnée d’entrée dans un formulaire est invalide dans Vue.js ?

A Utiliser la méthode this.$error() pour afficher un message d’erreur.

B Utiliser une fonction watch pour observer les changements de la donnée d’entrée.

C Utiliser un gestionnaire d’événements pour vérifier la validité et afficher des messages d’erreur conditionnels.

D Utiliser un v-if pour conditionner l’affichage d’un message d’erreur en fonction de la validité de la donnée.

Réponse  
 

7. Que fait le code VueJS suivant ?

<div>
  <p>{{ items.join(', ') }}</p>
</div>

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

A Affiche « apple banana cherry ».

B Affiche « apple, banana, cherry » avec les éléments de items séparés par une virgule.

C Affiche une erreur, car join ne peut pas être utilisé sur un tableau.

D Affiche seulement « apple ».

Réponse  

8. Comment emprunter des composants dans Vue.js ?

A En utilisant Vue.component() uniquement.

B En utilisant import pour inclure des composants et les déclarer dans le parent.

C En utilisant this.$borrow() pour importer des composants.

D En créant un fichier global et l’ajoutant dans main.js.

Réponse  

9. Que signifie la directive v-model dans un formulaire de saisie ?

A Créer un lien entre le DOM et le modèle de données, ce qui permet une mise à jour unidirectionnelle des données.

B Créer un lien entre le modèle de données et l’élément du formulaire, permettant une mise à jour bidirectionnelle.

C Créer une association entre l’élément du formulaire et la classe CSS.

D Forcer l’élément de formulaire à utiliser des valeurs par défaut.

Réponse  
 

10. Quelle méthode permet de modifier l’état global dans Vuex ?

A dispatch()

B setState()

C commit()

D getState()

Réponse