Vue.js Liaison de données

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 framework Angular et React existants.

La liaison de données est l'une des fonctionnalités 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 besoin d'écrire beaucoup de lignes pour avoir une liaison de données bidirectionnelle, contrairement à d'autres frameworks. La liaison de données unidirectionnelle signifie que la variable est simplement liée au DOM. D'autre part, bidirectionnel signifie que la variable est également liée au DOM. Lorsque DOM est modifié, la variable est également modifiée. Examinons donc les deux liaisons de données et voyons la bonne différence.

Liaison de données unidirectionnelle

Si nous voulons lier n'importe quelle variable, nous pouvons simplement utiliser Vue.la syntaxe des doubles accolades de js ou la syntaxe « Mustache » pour lier n'importe quelle variable à partir de l'instance de composant relative.

linuxhintText

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

Vue.js fournit également le raccourci pour lier des variables dans un attribut HTML. Au lieu d'écrire v-bind:nom-attribut, nous ne pouvons utiliser que deux points " :" et le nom de l'attribut.

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

Liaison de données bidirectionnelle/réactive

Afin de démontrer la liaison de données réactive, nous pouvons utiliser le v-modèle directive sur un champ de formulaire de saisie. Il émettra en interne un événement et changera la variable. À laquelle nous pouvons nous lier ailleurs dans le modèle à l'aide d'accolades doubles ou de la syntaxe « Mustache ».

Vous tapez : linuxhintText

Maintenant, chaque fois que nous saisissons un caractère dans le champ du formulaire de saisie, nous pouvons voir que la variable est également mise à jour simultanément.

Emballer

Dans cet article, nous avons appris à lier des variables dans Vue.js en utilisant des accolades doubles ou la syntaxe « Moustache ». Nous avons également démontré la liaison de données bidirectionnelle/réactive dans Vue.js en utilisant la directive v-model. Après avoir lu cet article, la liaison de données n'est plus une tâche difficile pour un débutant qui vient de débuter avec Vue.js. Alors, continuez à apprendre les concepts de Vue.js avec linuxhint.com. Merci!