Test technique VueJS | QCM & Quiz – Partie 32
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 v-if="false" sur un élément ?
A Applique une transition de disparition à l’élément.
B Cache l’élément et ne l’affiche pas.
C Crée un slot conditionnel pour l’élément.
D Désactive l’élément mais le garde dans le DOM.
v-if="false" empêche l’élément d’être rendu dans le DOM. Si la condition de v-if est évaluée comme false, l’élément est complètement retiré du DOM, et il n’est pas affiché à l’utilisateur.
2. Comment rendre un composant Vue réutilisable ?
A Appliquer un style conditionnel via v-bind.
B Créer un slot dynamique pour insérer des éléments.
C Utiliser v-model pour lier les données.
D Utiliser des props pour recevoir des données.
props. Les props permettent de passer des données dynamiques d’un composant parent à un composant enfant. Cela rend le composant plus flexible et réutilisable dans différents contextes, car vous pouvez lui transmettre différentes valeurs à chaque utilisation.
3. Quel est l’intérêt d’utiliser v-on:change sur un formulaire ?
A Capturer le changement de valeur d’un élément formulaire.
B Valider les données du formulaire avant l’envoi.
C Modifier dynamiquement le comportement du formulaire.
D Soumettre le formulaire à chaque changement.
v-on:change est utilisé pour détecter les changements de valeur dans les éléments d’un formulaire, comme un champ de saisie ou une case à cocher. Il est déclenché lorsque la valeur de l’élément change et que l’utilisateur a quitté l’élément (par exemple, après avoir tapé quelque chose dans un champ de texte ou modifié une sélection dans un menu déroulant).
4. Quel est le rôle de v-model.trim ?
A Supprimer les espaces au début et à la fin d’une chaîne de caractères.
B Ajouter un espace à chaque valeur entrée dans le champ.
C Vérifier si le champ contient des espaces avant d’envoyer.
D Formater la chaîne de caractères avant d’afficher.
v-model.trim applique automatiquement la méthode trim() sur la valeur saisie dans un champ de formulaire. Cela signifie que les espaces au début et à la fin de la chaîne de caractères seront supprimés lorsque la valeur est mise à jour.
5. Que fait this.$emit('event') dans un composant Vue ?
A Capture un événement provenant d’un composant enfant.
B Détruit un événement spécifique dans le composant.
C Émet un événement personnalisé vers le composant parent.
D Modifie l’état d’un composant enfant.
this.$emit('event') est utilisé dans un composant enfant pour émettre un événement personnalisé vers le composant parent. Cela permet au composant enfant de communiquer avec le parent, en lui envoyant des informations ou en déclenchant une action.
6. Que permet v-bind:class="{ active: isActive }" ?
A Ajouter la classe active si isActive est vrai.
B Supprimer la classe active si isActive est faux.
C Appliquer un style dynamique selon la valeur de isActive.
D Créer un événement personnalisé avec la classe active.
v-bind:class="{ active: isActive }" permet d’ajouter dynamiquement la classe active à un élément en fonction de la valeur de isActive. Si isActive est true, la classe active est appliquée à l’élément. Si isActive est false, la classe active est supprimée.
7. Que fait v-bind:style="{ color: isRed ? 'red' : 'blue' }" ?
A Change dynamiquement la couleur de l’élément selon isRed.
B Applique une transition de couleur entre rouge et bleu.
C Ajoute une bordure rouge ou bleue à l’élément.
D Modifie l’opacité de l’élément en fonction de isRed.
v-bind:style permet de lier dynamiquement des styles CSS à un élément. Dans cet exemple, la couleur de l’élément change en fonction de la valeur de isRed. Si isRed est true, la couleur de l’élément sera rouge (‘red’), sinon elle sera bleue (‘blue’).
8. Quel est l’effet de v-show="false" ?
A Change la visibilité du texte sans toucher à l’élément.
B Supprime l’élément du DOM complètement.
C Cache l’élément mais le garde dans le DOM.
D Désactive l’élément sans le cacher.
v-show="false", l’élément est caché, mais il reste présent dans le DOM. Cela signifie qu’il ne sera pas visible à l’utilisateur, mais il ne sera pas supprimé du DOM. Vue gère cela en ajoutant ou retirant la propriété CSS display: none sur l’élément.
9. Que fait v-bind:disabled="isDisabled" ?
A Active dynamiquement l’élément selon isDisabled.
B Désactive dynamiquement un élément en fonction de isDisabled.
C Ajoute une bordure à l’élément quand il est activé.
D Change le contenu du champ en fonction de la donnée.
v-bind:disabled="isDisabled" permet de lier dynamiquement l’attribut disabled d’un élément à la valeur de la donnée isDisabled. Si isDisabled est true, l’élément (par exemple un bouton, un champ de formulaire, etc.) sera désactivé. Si isDisabled est false, l’élément sera activé.
10. Que fait v-bind:style="{ backgroundColor: color }" ?
A Animer la couleur de fond au survol.
B Ajoute un style de bordure à l’élément.
C Change la couleur de texte selon la valeur de color.
D Applique dynamiquement la couleur de fond à l’élément.
v-bind:style="{ backgroundColor: color }" permet d’appliquer dynamiquement un style à un élément, en l’occurrence la couleur de fond (backgroundColor), en fonction de la valeur de la donnée color. Si color est une variable dans votre data, la couleur de fond de l’élément sera mise à jour en fonction de cette valeur.
- Test technique VueJS | QCM & Quiz – Partie 1
- Test technique VueJS | QCM & Quiz – Partie 2
- Test technique VueJS | QCM & Quiz – Partie 3
- Test technique VueJS | QCM & Quiz – Partie 4
- Test technique VueJS | QCM & Quiz – Partie 5
- Test technique VueJS | QCM & Quiz – Partie 6
- Test technique VueJS | QCM & Quiz – Partie 7
- Test technique VueJS | QCM & Quiz – Partie 8
- Test technique VueJS | QCM & Quiz – Partie 9
- Test technique VueJS | QCM & Quiz – Partie 10
- Test technique VueJS | QCM & Quiz – Partie 11
- Test technique VueJS | QCM & Quiz – Partie 12
- Test technique VueJS | QCM & Quiz – Partie 13
- Test technique VueJS | QCM & Quiz – Partie 14
- Test technique VueJS | QCM & Quiz – Partie 15
- Test technique VueJS | QCM & Quiz – Partie 16
- Test technique VueJS | QCM & Quiz – Partie 17
- Test technique VueJS | QCM & Quiz – Partie 18
- Test technique VueJS | QCM & Quiz – Partie 19
- Test technique VueJS | QCM & Quiz – Partie 20
- Test technique VueJS | QCM & Quiz – Partie 21
- Test technique VueJS | QCM & Quiz – Partie 22
- Test technique VueJS | QCM & Quiz – Partie 23
- Test technique VueJS | QCM & Quiz – Partie 24
- Test technique VueJS | QCM & Quiz – Partie 25
- Test technique VueJS | QCM & Quiz – Partie 26
- Test technique VueJS | QCM & Quiz – Partie 27
- Test technique VueJS | QCM & Quiz – Partie 28
- Test technique VueJS | QCM & Quiz – Partie 29
- Test technique VueJS | QCM & Quiz – Partie 30
- Test technique VueJS | QCM & Quiz – Partie 31
- Test technique VueJS | QCM & Quiz – Partie 32
- Test technique VueJS | QCM & Quiz – Partie 33
- Test technique VueJS | QCM & Quiz – Partie 34
- Questions techniques sur MYSQL
- QCM MySQL Corrigé – Optimisation de requêtes
- QCM Base de données avec correction
- QCM sur PHP
- QCM Symfony
- QCM AngularJS
- QCM React
- QCM HTML / CSS
- QCM Java – Programmation Orientée Objet
- QCM Python
- QCM Cloud Computing
- QCM Framework Spring
- QCM Javascript
- QCM jQuery
- QCM Oracle
- QCM sur GIT – Gestionnaire de version
- QCM Linux – Gestion de processus
- QCM Réseau
- QCM Architecture des ordinateurs
- QCM Securité informatique
- QCM En Informatique Générale
- QCM en C
- QCM en C#
- QCM sur l'algorithmique
- QCM Word
- QCM Excel
- QCM PowerPoint
- QCM Access
