Test technique VueJS | QCM & Quiz – Partie 12

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 le mécanisme de
key
key dans une boucle Vue.js ?

A Il permet d’appliquer des clés uniques à chaque élément de la liste

B Il permet de garder une clé cachée pour chaque élément de la liste

C Il définit une priorité d’affichage pour les éléments de la liste

D Il permet de créer un index dans la boucle

 

2. Quel est l’objectif de la bibliothèque Vuex ?

A Gérer l’authentification des utilisateurs

B Centraliser et gérer l’état de l’application de manière prévisible

C Gérer les transitions d’animation dans l’application

D Organiser les composants d’une application Vue

 

3. Que fait le code VueJS suivant ?
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div>
<p>{{ message.split(' ').map(word => word.toUpperCase()).join(' ')}}</p>
</div>
<div> <p>{{ message.split(' ').map(word => word.toUpperCase()).join(' ')}}</p> </div>
<div>
 <p>{{ message.split(' ').map(word => word.toUpperCase()).join(' ')}}</p>
</div>
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
export default {
data() {
return {
message: 'hello vue.js'
}
}
}
export default { data() { return { message: 'hello vue.js' } } }
export default {
  data() {
    return {
      message: 'hello vue.js'
    }
  }
}

A Le texte affichera « hello vue.js » sans modification.

B Le texte sera affiché en majuscules.

C Le texte sera affiché sous forme de mots séparés par des espaces, chaque mot étant en majuscules.

D Le texte sera transformé en un tableau de mots.

 
 

4. Que fait la directive
v-cloak
v-cloak dans Vue.js ?

A Elle lie un élément au modèle de données Vue.

B Elle masque un élément jusqu’à ce que Vue ait terminé la compilation du template.

C Elle permet de lier un événement à un élément dans le DOM.

D Elle permet de manipuler un élément DOM via JavaScript.

 

5. Quelle est la fonction de
Vue.use()
Vue.use() ?

A Ajouter un composant global à l’application

B Ajouter un plugin à une instance Vue.js

C Créer une nouvelle instance Vue

D Initialiser le routage dans une application Vue.js

 

6. Comment est-ce que Vuex gère l’état global d’une application Vue.js ?

A En définissant un store global contenant l’état de l’application

B En réinitialisant l’état chaque fois que l’application se recharge

C En utilisant des sessions pour stocker l’état global

D En reliant directement les données d’un composant parent à un composant enfant

 
 

7. Quelle est la méthode Vue.js pour écouter des événements personnalisés émis par un composant enfant ?

A

v-on
v-on

B

this.$on
this.$on

C

this.$emit
this.$emit

D

v-bind
v-bind

 

8. Que fait le code VueJS suivant ?
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div>
<input v-model="searchQuery" placeholder="Rechercher..." />
<p v-if="searchQuery.length > 3">Vous avez recherché : {{ searchQuery }}</p>
<p v-else>Le texte de recherche doit comporter au moins 4 caractères.</p>
</div>
<div> <input v-model="searchQuery" placeholder="Rechercher..." /> <p v-if="searchQuery.length > 3">Vous avez recherché : {{ searchQuery }}</p> <p v-else>Le texte de recherche doit comporter au moins 4 caractères.</p> </div>
<div>
    <input v-model="searchQuery" placeholder="Rechercher..." />
    <p v-if="searchQuery.length > 3">Vous avez recherché : {{ searchQuery }}</p>
    <p v-else>Le texte de recherche doit comporter au moins 4 caractères.</p>
</div>
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
export default {
data() {
return {
searchQuery: ''
}
}
}
export default { data() { return { searchQuery: '' } } }
export default {
  data() {
    return {
      searchQuery: ''
    }
  }
}

A Le texte affiché dépend de la longueur de la chaîne

searchQuery
searchQuery.

B Le texte sera affiché uniquement si la recherche est plus longue que 3 caractères.

C Le texte ne s’affiche jamais car la condition

searchQuery.length > 3
searchQuery.length > 3 n’est jamais vraie.

D A et B sont corrects.

 

9. Quelle est la meilleure manière de créer un composant global dans Vue.js ?

A Déclarer un composant dans l’objet data de l’application Vue

B Utiliser

Vue.component()
Vue.component() pour enregistrer un composant globalement

C Déclarer un composant dans l’objet

methods
methods de l’application Vue

D Créer un fichier index.js pour chaque composant

 
 

10. Qu’est-ce que Vue CLI ?

A Un outil pour créer des applications Vue.js via une interface graphique

B Une bibliothèque pour la gestion des états dans Vue.js

C Un ensemble d’outils en ligne de commande pour créer et configurer des projets Vue.js

D Une méthode pour optimiser le rendu des composants

 

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *