Test technique VueJS | QCM & Quiz – Partie 1

mars 14, 2025mars 14, 2025 Thomas Aucun commentaire

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 Vue.js ?

A Un framework JavaScript côté serveur

B Un framework JavaScript côté client pour créer des interfaces utilisateur

C Une bibliothèque CSS

D Un serveur web

Vue.js est un framework JavaScript principalement utilisé pour construire des interfaces utilisateur dynamiques côté client.

2. Qu’est-ce qu’un composant dans Vue.js ?

A Un type d’élément HTML

B Une fonction JavaScript utilisée pour manipuler le DOM

C Une petite application avec son propre modèle, vue et logique

D Un attribut HTML

Un composant dans Vue.js est une entité réutilisable qui contient son propre modèle, sa propre vue et sa propre logique. Les composants peuvent être imbriqués pour créer des applications complexes.

3. Quelle est la bonne manière d’installer Vue.js dans un projet ?

A npm install vue@next

B npm install vue@2

C npm install vue

D npm install vuejs

Vue.js 3 (la version actuelle) peut être installée avec npm install vue@next. Pour Vue 2, vous utiliseriez npm install vue@2. La version vuejs n’est pas correcte, et la commande npm install vue installe par défaut la dernière version stable (actuellement Vue 3). La mention @next est nécessaire pour être spécifique à Vue 3.

4. Quelle est la syntaxe correcte pour créer une instance de Vue.js ?

A Vue.create({ el: '#app' })

B new VueApp({ el: '#app' })

C createVue({ el: '#app' })

D new Vue({ el: '#app' })

La bonne syntaxe pour initialiser une instance de Vue est new Vue({ el: '#app' }), où el est l’élément HTML dans lequel l’instance Vue sera montée.

5. Quelle directive Vue.js est utilisée pour afficher des données dans le DOM ?

A v-model

B v-bind

C v-if

D v-for

v-bind est utilisé pour lier des attributs HTML aux données de Vue.js. Par exemple, v-bind:href="url" permet de lier l’attribut href à une variable url. v-model est pour la liaison bidirectionnelle des formulaires, v-if pour les conditions et v-for pour les boucles.

6. Dans Vue.js, que représente la propriété « data » ?

A Les données statiques de l’application

B Les méthodes utilisées dans l’application

C Les variables réactives de l’instance Vue

D Les événements définis dans l’application

La propriété data dans Vue.js contient les variables qui sont réactives, ce qui signifie qu’elles sont surveillées par Vue et que le DOM se met à jour automatiquement lorsque ces données changent.

7. Que fait la propriété `computed` dans Vue.js ?

A Elle permet de définir des données statiques.

B Elle permet de lier des événements entre les composants.

C Elle permet de définir des propriétés calculées qui dépendent d’autres propriétés.

D Elle permet d’ajouter des styles CSS dynamiques.

computed dans Vue.js est utilisé pour définir des propriétés qui dépendent d’autres propriétés. Ces propriétés sont recalculées seulement lorsque leurs dépendances changent, ce qui permet d’optimiser les performances.

8. Comment passer des données d’un composant parent à un composant enfant dans Vue.js ?

A En utilisant props

B En utilisant data

C En utilisant v-bind

D En utilisant emit

Les données sont transmises des composants parents aux composants enfants via les props dans Vue.js. Le parent passe des valeurs aux enfants en les liant à des props, qui sont ensuite accessibles dans le composant enfant.

9. Quelle est la différence entre `v-if` et `v-show` ?

A v-if est plus performant pour les éléments affichés fréquemment.

B v-show garde l’élément dans le DOM mais change sa visibilité.

C v-if ne peut pas être utilisé avec des expressions logiques.

D Il n’y a pas de différence.

v-if ajoute ou enlève l’élément du DOM en fonction de la condition, ce qui peut être plus coûteux en performance pour des affichages fréquents. v-show change simplement la visibilité de l’élément en jouant avec la propriété CSS display.

10. Que fait la directive `v-for` dans Vue.js ?

A Créer une boucle sur un tableau ou un objet

B Vérifier une condition avant de rendre un élément

C Lier une propriété d’un composant à un attribut HTML

D Appliquer un style CSS dynamique à un élément

La directive v-for est utilisée pour itérer sur des tableaux ou des objets. Elle permet de répéter un bloc d’éléments HTML pour chaque élément dans un tableau ou chaque propriété dans un objet.

11. Quelle méthode Vue.js est utilisée pour initialiser une instance de Vue ?

A initVue()

B Vue.create()

C Vue.init()

D new Vue()

Pour créer une instance Vue, vous devez utiliser new Vue(), qui prend un objet de configuration avec des options comme el, data, methods, etc.

12. Quelle directive Vue.js est utilisée pour répéter un élément plusieurs fois dans une liste ?

A v-show

B v-model

C v-bind

D v-for

La directive v-for est utilisée pour itérer sur des données (tableaux ou objets) et rendre un élément pour chaque item de la collection. Par exemple, v-for="item in items" crée un élément pour chaque élément dans le tableau items.

13. Que fait la méthode `$emit` dans Vue.js ?

A Émet un événement personnalisé du composant parent au composant enfant

B Émet un événement personnalisé du composant enfant au composant parent

C Émet un changement de données dans l’instance Vue

D Émet une alerte JavaScript dans le navigateur

La méthode $emit est utilisée pour émettre des événements depuis un composant enfant vers un composant parent. Elle permet de communiquer entre les composants en envoyant des événements personnalisés.

14. Quelle est la syntaxe correcte pour lier un champ de texte avec `v-model` dans Vue.js ?

A <input v-model="message">

B <input :value="message">

C <input @input="message">

D <input v-bind="message">

La directive v-model est utilisée pour la liaison bidirectionnelle entre le champ de texte et la variable message. Toute modification dans le champ de texte met à jour la variable, et inversement.

15. Quel est le rôle de la méthode `mounted()` dans Vue.js ?

A Elle est appelée avant que le DOM ne soit rendu.

B Elle est appelée une fois que l’instance Vue est créée, mais avant l’ajout dans le DOM.

C Elle est appelée après que l’instance Vue soit montée dans le DOM.

D Elle est utilisée pour définir les données réactives.

La méthode mounted() est utilisée dans le cycle de vie d’un composant Vue.js. Elle est appelée après que le composant ait été inséré dans le DOM, ce qui permet de faire des opérations qui nécessitent l’accès au DOM, comme l’ajout d’un événement ou l’initialisation d’une bibliothèque.

QCMs qui pourraient vous intéresser :

1. Qu’est-ce que Vue.js ?

2. Qu’est-ce qu’un composant dans Vue.js ?

3. Quelle est la bonne manière d’installer Vue.js dans un projet ?

4. Quelle est la syntaxe correcte pour créer une instance de Vue.js ?

5. Quelle directive Vue.js est utilisée pour afficher des données dans le DOM ?

6. Dans Vue.js, que représente la propriété « data » ?

7. Que fait la propriété computed dans Vue.js ?

8. Comment passer des données d’un composant parent à un composant enfant dans Vue.js ?

9. Quelle est la différence entre v-if et v-show ?

10. Que fait la directive v-for dans Vue.js ?

11. Quelle méthode Vue.js est utilisée pour initialiser une instance de Vue ?

12. Quelle directive Vue.js est utilisée pour répéter un élément plusieurs fois dans une liste ?

13. Que fait la méthode $emit dans Vue.js ?

14. Quelle est la syntaxe correcte pour lier un champ de texte avec v-model dans Vue.js ?

15. Quel est le rôle de la méthode mounted() dans Vue.js ?

Vous pourrez aussi aimer