Vue.liaison des données JS

Vue.JS est une bibliothèque si facile à apprendre et accessible. Ainsi, avec la connaissance de HTML, CSS et JavaScript, nous pouvons commencer à créer des applications Web dans Vue.js. Vue.JS est construit en combinant les meilleures fonctionnalités d'un frameworks angulaires et réagis déjà existants.

La liaison des données est l'une des caractéristiques les plus élégantes de Vue.JS car il fournit une liaison de données réactive / bidirectionnelle. En Vue.JS, nous n'avons pas à écrire beaucoup de lignes pour avoir une liaison de données bidirectionnelle, contrairement à d'autres cadres. La liaison des données unidirectionnelle signifie que la variable est simplement liée au DOM. D'un autre côté, bidirectionnel signifie que la variable est également liée à partir du DOM. Lorsque Dom est modifié, la variable est également modifiée. Alors, jetons un coup d'œil aux deux liaisons de données et voyons la bonne différence.

Liaison de données unidirectionnelle

Si nous voulons lier une variable, nous pouvons simplement utiliser Vue.Syntaxe à double orthodon de JS ou syntaxe «moustache» pour lier toute variable à partir de l'instance de composant relatif.

LinuxHintText

Ou, si nous voulons lier une variable à l'intérieur d'un attribut HTML, nous pouvons utiliser le en V directif.

Vue.JS fournit également le raccourci des variables de liaison dans un attribut HTML. Au lieu d'écrire Vind: nom d'attribut, Nous ne pouvons utiliser qu'un côlon «:» et un nom d'attribut.

Mais ce ne sont que des liaisons de données. Pour démontrer la liaison des données bidirectionnelle, nous pouvons utiliser le modèle en V Directive fournie par la Vue.js.

Liaison des données bidirectionnelles / réactives

Afin de démontrer la liaison des données réactives, nous pouvons utiliser le modèle en V Directive sur un champ de formulaire d'entrée. Il émettra en interne un événement et modifiera la variable. Auquel nous pouvons nous lier ailleurs dans le modèle à l'aide de bliillons à double boucle ou de syntaxe «moustache».

Vous tapez: LinuxHintText

Maintenant, chaque fois que nous entrons un caractère dans le champ de formulaire d'entrée, nous pouvons voir que la variable met également à jour simultanément.

Emballer

Dans cet article, nous avons appris à lier les variables dans Vue.js utilisant des accolades à double boucle ou une syntaxe «moustache». Nous avons également démontré la liaison des données à deux voies / réactives dans Vue.js utilisant la directive du modèle V. Après avoir lu cet article, la liaison des données n'est plus une tâche difficile pour un débutant qui vient de commencer par Vue.js. Alors, continuez à apprendre les concepts de Vue.JS avec Linuxhint.com. Merci!