Vue.Introduction du modèle JS

Vue.JS, qui est utilisé pour créer des interfaces utilisateur (UIS) et des applications à une page (spas), combine bon nombre des meilleures fonctionnalités des frameworks JavaScript Angular and React, et de nombreux développeurs aiment utiliser Vue.js car il fournit un environnement neutre.

Comme html, Vue.JS a une syntaxe de modèle, et nous pouvons utiliser la syntaxe du modèle pour lier le DOM avec les données des composants. Dans cet article, nous vous montrerons comment insérer des données dans la syntaxe du modèle et les moyens d'interpoler différents types de données.

Interpolation de texte

Si nous voulons lier une variable à partir de l'instance de composant relatif, nous pouvons utiliser des accolades à double boucle, qui est également appelée syntaxe «moustache».

LinuxHintText

Vue.JS offre une liaison bidirectionnelle, ce qui signifie que, chaque fois que la valeur d'une variable est modifiée, l'élément sera rendu à nouveau. Cependant, si nous ne voulons pas qu'il soit mis à jour, nous pouvons utiliser le v-once directif.

LinuxHintText

Interpolation HTML brute

Vue.JS ne permet pas la liaison des données du texte brut, mais nous pouvons lier le texte HTML brut à l'aide du v-html directif. Dans l'exemple ci-dessous, nous avons une variable dans un composant appelé Rawhtml qui contient du texte HTML brut.

Linuxhint est Super

Nous pouvons lier le Rawhtml variable en utilisant v-html directive comme suit.

Le div La balise aura un p Tag à l'intérieur.

Attributs Interpolation

Dans l'interpolation HTML brute, nous n'avons pas utilisé de contreventement à double boucle pour lier la variable. Par conséquent, si nous voulons lier une variable à l'intérieur de l'attribut HTML, nous pouvons utiliser le en V directif.

Expressions

Vue.JS ne fournit pas seulement des fonctionnalités pour lier une variable. Vue.JS peut être utilisé pour écrire différents types d'expressions dans des accolades à double boucle.

Emballer

Dans cet article, nous avons présenté Vue.Syntaxe de modèle simple mais utile de JS. Cependant, il y a beaucoup plus à apprendre sur Vue.js. Vous pouvez visiter le site officiel de Vue.JS ici, et vous pouvez continuer à apprendre sur JavaScript avec Linuxhint.com.