Test technique VueJS | QCM & Quiz – Partie 7

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. Que fait le code VueJS suivant ?

<div id="app">
  <p>{{ isActive ? 'Activé' : 'Désactivé' }}</p>
  <button @click="toggleStatus">Changer l'état</button>
</div>

new Vue({
  el: '#app',
  data: {
    isActive: false
  },
  methods: {
    toggleStatus() {
      this.isActive = !this.isActive;
    }
  }
});

A Le texte affiché dans le paragraphe alterne entre « Activé » et « Désactivé » à chaque clic sur le bouton.

B Le texte affiché est toujours « Activé », quelle que soit la valeur de isActive.

C Le texte affiché est toujours « Désactivé », quelle que soit la valeur de isActive.

D Vue.js génère une erreur car il y a une erreur dans la syntaxe de la condition ternaire.

Réponse  

2. Que fait la méthode this.$nextTick() dans Vue.js ?

A Elle permet de forcer une mise à jour du DOM immédiatement.

B Elle permet d’attendre que Vue ait effectué toutes les mises à jour du DOM avant d’exécuter une fonction.

C Elle permet de déclencher un événement personnalisé après chaque mise à jour du DOM.

D Elle permet de rafraîchir l’ensemble des composants dans l’application.

Réponse  

3. Quelle est la méthode pour partager des données entre plusieurs composants dans Vue.js ?

A mixins

B computed

C props

D event bus

Réponse  
 

4. Quelle directive Vue.js est utilisée pour afficher ou masquer un élément en fonction d’une condition ?

A v-for

B v-show

C v-model

D v-else

Réponse  

5. Que fait le code VueJS suivant ?

<div id="app">
  <p>{{ items.length }}</p>
  <button @click="addItem">Ajouter un item</button>
</div>

new Vue({
  el: '#app',
  data: {
    items: []
  },
  methods: {
    addItem() {
      this.items.push('Nouvel item');
    }
  }
});

A Le texte affiché dans le paragraphe affiche la longueur du tableau items, et chaque clic sur le bouton ajoute un nouvel élément à ce tableau.

B Le texte affiché dans le paragraphe restera toujours « 0 », même si des éléments sont ajoutés au tableau.

C Le bouton ne fonctionne pas, car push ne peut pas être utilisé sur un tableau dans VueJS.

D Vue.js générera une erreur car il ne peut pas réagir à la mutation du tableau items.

Réponse  

6. Quelle est la fonctionnalité de Vuex dans Vue.js ?

A Gérer les transitions entre les vues dans une application SPA.

B Gérer l’état global de l’application.

C Gérer la réactivité des données dans un composant.

D Gérer les routes et les vues dans une application Vue.js.

Réponse  
 

7. Quelle méthode permet de définir un watcher pour surveiller une donnée dans Vue.js ?

A watcher()

B computed

C this.$observe()

D this.$watch()

Réponse  

8. Que fait le code VueJS suivant ?

<div id="app">
  <button v-on:click="handleClick">Click me</button>
</div>

new Vue({
  el: '#app',
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
});

A Lorsque le bouton est cliqué, la page sera redirigée vers une autre URL.

B Vue.js génère une erreur car alert ne peut pas être utilisé dans les méthodes.

C Ce code affiche une alerte avec le message « Button clicked! » lorsque le bouton est cliqué.

D Le bouton n’affichera rien, car l’événement v-on:click est incorrectement utilisé.

Réponse  

9. Quelle directive est utilisée pour lier des valeurs dynamiques à des attributs de classes CSS dans Vue.js ?

A v-bind:class

B v-model

C v-bind:style

D v-class

Réponse  
 

10. Que fait le code VueJS suivant ?

<div id="app">
  <input v-model="searchQuery" placeholder="Search...">
  <p>Searching for: {{ searchQuery }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    searchQuery: ''
  }
});

A Ce code affichera toujours « Searching for: undefined », même si du texte est saisi.

B Ce code génère une erreur car v-model ne peut pas être utilisé sur un élément <input>.

C La valeur de searchQuery restera vide même après la saisie de texte.

D Ce code crée une zone de saisie liée à la propriété searchQuery. Chaque changement dans le champ de saisie met à jour la variable searchQuery et l’affiche dans le paragraphe.

Réponse