L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Démystifier la directive v-modèle dans Vue
Découvrez la directive v-model dans Vue.js et découvrez les bases de la liaison bidirectionnelle et son utilisation dans le développement de votre propre application.
Le plus souvent, je reçois des commentaires et des messages. me demandant de rentrer dans les détails sur v-model par des personnes qui ont lu un article ou assisté à un atelier et on aborde le magic de v-model mais
Aujourd'hui, nous allons entrer dans les détails sur ce que cette directive fait exactement pour nous dans Vue et un aperçu de la façon dont elle fonctionne en arrière-plan.
Cet article est destiné aux novices et intermédiaires. les utilisateurs qui souhaitent approfondir leur compréhension de la directive, et je suppose une connaissance de base générale de Vue dans son ensemble.
Liens bidirectionnels et notions de base
Souvent, nous décrivons le v-model directive en tant qu'entité magique permettant de créer une liaison bidirectionnelle à un élément d'entrée. Mais que signifie exactement la liaison à double sens? Et pourquoi devriez-vous vous en soucier?
Vue et d'autres frameworks comme celui-ci possèdent un tas de méthodes magiques et de façons de faire les choses. v-model est un excellent exemple de ce genre de chose.
Les connaissances de base requises pour l'utiliser sont minimes car, franchement, vous n'avez pas vraiment besoin de comprendre comment cela fonctionne. pour l'utiliser – mais lorsque vous comprenez parfaitement le concept qui le sous-tend, de manière vous l'utilisez ou que vous y réfléchissez.
Listen to User Input
Commençons par un élément d'entrée simple, en utilisant type email.
< input type = " email " />
Le problème est simple: nous devons pouvoir sais ce que l'utilisateur tape ici. Et nous aurons peut-être besoin de l'envoyer à l'arrière pour qu'ils connectent l'utilisateur ou le capturent pour un formulaire d'enregistrement.
Comment aborderiez-vous cela avec jQuery ou vanilla JS?
Dans jQuery, vous le feriez peut-être Ajoutez un attribut id à l'élément et ciblez-le directement pour extraire la valeur.
< input type = " email. " id = " email " />
$ ( '# email' ) [19659014]. val () ;
Le problème de cette approche est que vous êtes obligé d’ajouter un écouteur d’événement si vous souhaitez réagir aux frappes au clavier, car obtiennent une valeur statique au moment où le code est exécuté. Ce n'est pas réactif .
Essayons-le à nouveau avec un écouteur d'événement et JS vanille
const el = document . querySelector ( '# email' ) ;
el . addEventListener ( 'input' function ( événement ) {
const inputValue = événement . target . value ;
doSomethingWith ( inputValue ). ; 19659055]} ) ;
Bien, nous allons quelque part! Jusqu'à présent, nous sommes en mesure d'appeler la fonction doSomethingWith avec la valeur de l'événement (ce que l'utilisateur a tapé). Cela ressemble à beaucoup de code cependant, et que se passe-t-il si nous avons un formulaire avec 30 entrées différentes?
Faisons-le à l’aide de Vue. Nous allons ajouter un écouteur d'événement à l'entrée et appeler notre fonction fictive doSomethingWith chaque fois qu'elle se déclenche.
< entrée type = " ] email " @input = " doQuelquechoseAvec " />
Je ne sais pas pour vous, mais cela ressemble à malice d'avocat magique pour moi. Comment Vue accomplit-il la même chose en coulisse?
Tout d’abord, notez que nous n’avons plus besoin d’un id . En fait, je dirais que l'utilisation de id dans Vue est une idée terrible!
Si vous utilisez des identifiants dans Vue et que vous utilisez le composant à plusieurs endroits, vous obtiendrez plusieurs fois un élément avec le même identifiant – qui énonce CHAOS.
Votre développeur avocat a mal tourné, frand. GG. 1965
Revenons à notre exemple, mais lorsque nous ajoutons @input à notre élément. Vue est assez intelligent pour attacher le listener d’événement nécessaire à cet élément particulier via référence. Il traitera également en supprimant cet écouteur d'événement pour nous!
Enfin, il appellera la fonction que nous avons passée à l'intérieur du "" chaque fois que l'événement est déclenché et qu'il passe c'est l'objet événement .
Modification de l’entrée par programmation
Passons au problème n ° 2.
Vous avez réussi à écouter les événements de l’utilisateur qui fait des entrées sur votre champ – bon travail! (Espérons que j'utilise Vue et pas jQuery, allez. Je suis déçu. ☹️)
Maintenant, deuxième partie de la “liaison bidirectionnelle”. Que faire si nous voulons utiliser dynamiquement quelque chose dans le courrier électronique de l’utilisateur et que l’entrée reflète le changement?
Peut-être avons-nous une sorte de formulaire à remplissage automatique ou de validation, ou avons-nous un autre élément d’entrée qui pré-remplira leur nom de la base de données. De nombreux scénarios sont possibles.
Commençons par aborder ce problème avec jQuery. ?
const userEmail = 'somevalue@theuserentered.com' ;
$ ( '# email' ) . on ( 'input' function () {
userEmail = $ ( '# email' ) . val () ;
} ]) ;
function changeEmail ( newEmail ) {
$ ( '# email' ) [19659014]. val ( newEmail ) ;
userEmail = newEmail ;
}
changeEmail ( 'votre-email@is-wrong.com' ) ;
Vous pouvez voir à partir de ce dernier exemple à quelle vitesse cela peut commencer à devenir vraiment compliqué. Les fichiers monolithiques de jQuery pour la gestion des événements et la validation des entrées appartiennent au passé!
Vous pouvez également comprendre à quel point il sera difficile de conserver un état . Nous avons une variable de haut niveau userEmail qui conserve la valeur, et nous devons veiller à ce que notre code soit ordonné. Maintenant, faites ceci 40 fois pour un gros formulaire, s'il vous plaît.
Une chose que vous n'avez peut-être pas non plus prise en compte à ce stade est que nous essayons d'être très prudent lorsque vous définissez le .val de notre entrée. lorsque nous changeons la fonction changeEmail . Mais que se passe-t-il si un autre développeur, ou même nous-mêmes, crée une autre fonction modifiant la variable userEmail ailleurs?
Nous devons garder à l’esprit que chaque fois que cette variable change, l’entrée doit être mise à jour, ou nous devons entrer dans un code JavaScript assez avancé qui configurera des getters et des setters pour résoudre ce problème de réactivité.
Abordons ce second problème dans Vue. Nous allons créer d'abord un état local dans notre composant imaginaire.
données () {
return {
email : ''
}
}
Maintenant que nous avons notre état local, nous devons indiquer à l'entrée comment l'utiliser et la lier à la valeur.
< input
type = " email "
: value = " email "
@input = " faire quelque chose de "
/>
méthodes : {
faire de quelque choseWith ( événement ) {
ceci . email = événement . cible . valeur ;
]}
}
C'est tout! Chaque fois que l'état de l'email change, l'entrée est mise à jour en conséquence. Nous avons maintenant deux moyens de nous lier à l'entrée:
Tout d'abord, lorsque notre état local change. Deuxièmement, lorsque l'utilisateur tape sur le champ, l'auditeur d'entrée en entrée mettra à jour l'état avec la valeur. Lorsque l'état sera mis à jour, l'entrée sera mise à jour.
Voyez-vous le cycle?
Entrez v-model
Les gentils gars de la Vue ont compris que cette configuration consistant à ajouter deux liaisons unidirectionnelles, une qui alimente en et une qui alimente . ] out des entrées était très courant lorsqu'il s'agissait de formulaires et de données utilisateur.
Ainsi naquirent l'avocat magique et la directive v-model . Les deux ont été soignés et nourris, et l'avocat magique a mal tourné pendant la nuit et nous avons dû le jeter. Mais telle est la vie.
Que se passe-t-il ensuite lorsque vous devez lier vos entrées dans les deux sens? Devez-vous suivre ce double processus en liant le : saisissez à un état quelconque, puis écoutez un événement et réécrivez l’ensemble de l’état?
La réponse est non! v-model l'avocat de votre quartier, à la rescousse.
Nous l'avons actuellement pour notre formulaire.
< input
type = " email "
: value = " email "
@input = " faire quelque chose avec "
/>
données () {
return {
email : ''
}
}
methods : {
faire quelque chose avec ( événement ) {
ce . email = événement . target . value ;
}
}
Et avec le pouvoir investi en moi par Vue et la bénédiction de Captain Planet (oui, je je suis vieux), on peut faire simple et gentil.
< input type = " email " v- model = " email " />
données () {
retour {
email : ''
}
}
C’est tout! v-model s'assurera que le bon événement est écouté (dans le cas d'éléments natifs tels que des entrées, des sélections, etc.), puis liera notre propriété de données de courrier électronique locale à il! Ah-deux, ah-moyen, ah-contraignant. 1965
Conclusion
N'oubliez pas que v-model présente certaines réserves concernant les propriétés auxquelles il doit se lier et les événements qu'il doit écouter.
Vue est très intelligent en ce qui concerne dans les coulisses lorsqu'il est utilisé sur des entrées, des sélections, des cases à cocher et des boutons radio – mais lorsque vous travaillez avec des composants personnalisés, vous allez devoir vous en charger vous-même.
Toutefois, cela sort du cadre de cet article pour débutant. Mais vous pouvez consulter cette référence sur v-model sur des composants personnalisés sur la documentation officielle ou la dernière partie de ma série Vue pour débutants où je touche sur modèle v .
Source link