Test technique VueJS | QCM & Quiz – Partie 4

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. Comment définir une méthode dans un composant Vue.js ?

A Dans l’option methods d’un objet Vue.

B Dans l’option data d’un objet Vue.

C Dans l’option props d’un objet Vue.

D Dans la fonction created().

methods: {
  greet() {
    console.log('Hello!');
  }
}

2. Dans Vue.js, comment définir des données réactives dans une instance Vue ?

A Dans l’attribut computed

B Dans l’attribut props

C Dans l’attribut methods

D Dans l’attribut data

3. Que fait le code VueJS suivant ?

<div id="app">
  <button @click="increment">Increment</button>
  <p>{{ count }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

A Chaque fois que le bouton est cliqué, le compteur count augmente de 1 et le résultat est affiché dans le paragraphe.

B Le bouton ne fonctionne pas car il manque un événement pour déclencher l’incrément.

C Ce code va lancer une erreur car Vue.js ne peut pas utiliser @click.

D La valeur de count ne s’affichera jamais car il manque une liaison avec le DOM.

4. Quelle est la principale différence entre v-if et v-show dans Vue.js ?

A v-if ne rend jamais l’élément, tandis que v-show l’affiche toujours

B v-if rend l’élément en fonction d’une condition, tandis que v-show modifie uniquement la visibilité de l’élément

C v-if utilise moins de mémoire que v-show

D v-show n’est pas compatible avec les données réactives

5. Que fait le code VueJS suivant ?

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]
  }
});

A Le code affichera uniquement le premier élément de la liste items.

B Le code générera une erreur car v-for ne peut pas être utilisé avec des tableaux.

C Chaque élément de la liste affichera « undefined ».

D Ce code crée une liste d’éléments <li> en utilisant les données items, avec chaque élément ayant un key basé sur l’id de chaque objet.

6. Que fait la directive v-bind dans Vue.js ?

A Elle lie une donnée à un attribut ou une propriété d’un élément HTML.

B Elle permet d’ajouter une classe CSS dynamique.

C Elle lie une donnée à un événement d’un élément.

D Elle conditionne l’affichage d’un élément.

7. Quelle est la différence entre v-model et v-bind dans Vue.js ?

A v-bind lie des données bidirectionnellement, tandis que v-model lie des données unidirectionnellement.

B v-model est utilisé pour les événements, tandis que v-bind est utilisé pour les attributs.

C v-model lie des données bidirectionnellement, tandis que v-bind lie des données unidirectionnellement.

D v-model est utilisé pour les conditions, tandis que v-bind pour l’affichage.

8. Que fait le code VueJS suivant ?

<div id="app">
  <p v-if="isVisible">Ce texte est visible</p>
  <p v-else>Ce texte est masqué</p>
</div>

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

A Le texte ‘Ce texte est masqué’ sera toujours affiché.

B Les deux éléments <p> seront affichés, mais le texte ‘Ce texte est visible’ sera toujours au-dessus.

C Vue.js affichera une erreur car v-if ne peut pas être utilisé avec des éléments p.

D Si isVisible est true, le texte ‘Ce texte est visible’ sera affiché. Sinon, le texte ‘Ce texte est masqué’ sera affiché.

9. Quelle est la fonctionnalité de v-for dans Vue.js ?

A Elle permet de créer des éléments répétitifs dans le DOM en fonction d’une expression.

B Elle lie une donnée à une classe CSS.

C Elle conditionne l’affichage d’un élément dans le DOM.

D Elle permet d’effectuer des calculs sur les données.

10. Quelle est la principale différence entre v-show et v-if dans Vue.js ?

A v-if est plus rapide que v-show car il ne nécessite pas de modification du DOM.

B v-show ne supprime pas l’élément du DOM mais le cache avec display: none, tandis que v-if le supprime complètement du DOM.

C v-show est utilisé pour les données réactives, tandis que v-if est utilisé pour les événements.

D v-if est utilisé pour les boucles et v-show pour les conditions.