Test technique VueJS | QCM & Quiz – Partie 11

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. Quelle méthode Vue.js est utilisée pour attendre la fin de la mise à jour du DOM avant d’exécuter du code ?

A this.$watch()

B this.$nextTick()

C this.$forceUpdate()

D this.$mount()

Réponse  

2. Quel hook Vue.js permet de manipuler les données avant que le composant soit créé ?

A created()

B beforeCreate()

C mounted()

D beforeDestroy()

Réponse  

3. Quelle option Vue.js est utilisée pour enregistrer des composants locaux dans un composant parent ?

A data

B methods

C props

D components

Réponse  
 

4. Que fait le code VueJS suivant ?

<div>
  <p>{{ message.split(' ').join('-') }}</p>
</div>

export default {
  data() {
    return {
      message: 'Hello Vue.js'
    }
  }
}

A Affiche « Hello-Vue.js » avec un tiret à la place de l’espace.

B Affiche « Hello Vue.js » sans modification.

C Affiche une erreur car la méthode split n’est pas définie.

D Affiche « Hello-Vue.js » sans espaces.

Réponse  

5. Que fait le code VueJS suivant ?

<div>
  <input v-model="message" />
  <p>{{ message }}</p>
</div>

export default {
  data() {
    return {
      message: 'Vue.js'
    }
  }
}

A Le champ de texte n’est pas lié correctement à la donnée message.

B Affiche un champ de texte vide et le paragraphe n’affiche rien.

C Affiche toujours « Vue.js » dans le paragraphe sans possibilité de le changer.

D Affiche la valeur de message dans le paragraphe et met à jour cette valeur à chaque modification du champ de texte.

Réponse  

6. Que fait la méthode this.$destroy() dans Vue.js ?

A Elle permet de supprimer un composant du DOM.

B Elle supprime un élément spécifique de la vue.

C Elle détruit complètement l’instance d’un composant Vue.

D Elle déclenche une re-création de l’instance du composant.

Réponse  
 

7. Que permet de faire la méthode Vue.extend() dans Vue.js ?

A Créer une nouvelle instance de composant

B Étendre un composant existant en créant une version personnalisée

C Créer une nouvelle application Vue.js

D Manipuler l’état global de Vuex

Réponse  

8. Quelle méthode dans Vue.js permet de réagir à la création d’une instance de Vue ?

A beforeCreate()

B created()

C mounted()

D beforeMount()

Réponse  

9. Que fait le code VueJS suivant ?

<div>
  <input v-bind="inputProps" />
</div>

export default {
  data() {
    return {
      inputProps: {
        type: 'text',
        placeholder: 'Entrez du texte ici'
      }
    }
  }
}

A Le champ d’entrée affichera un texte par défaut dans l’input.

B Les propriétés type et placeholder sont définies dynamiquement à partir de inputProps.

C Le champ d’entrée est de type password et affichera le texte « Entrez du texte ici ».

D Il y a une erreur car l’objet inputProps ne peut pas être lié avec v-bind.

Réponse  
 

10. Quelle méthode Vue.js est utilisée pour forcer un re-render d’un composant ?

A this.$forceUpdate()

B this.$nextTick()

C this.$destroy()

D this.$set()

Réponse