Le modèle de Vue.js est implémenté en fonction de DOM. Cela signifie que tous les modèles Vue.js sont des HTML comparables et valides, et sont améliorés par certaines fonctionnalités spéciales. Les modèles VUE sont donc fondamentalement différents des modèles basés sur des chaînes, gardez cela à l'esprit.
Interpolation
texte
La forme la plus élémentaire de liaison des données est l'interpolation du texte, en utilisant la syntaxe "Moustache" (doublées):
<span> Message: {{msg}} </span>
La balise de moustache est remplacée par la valeur de l'attribut MSG de l'objet de données correspondant. Il sera également mis à jour chaque fois que cette propriété changera.
Vous ne pouvez également traiter qu'une seule interpolation, et les changements de données futures ne provoqueront plus de mises à jour d'interpolation:
<span> Cela ne changera jamais: {{* msg}} </span>
HTML d'origine
La balise Dual Mustache analyse les données en texte brut au lieu de HTML. Afin de produire de vraies chaînes HTML, vous devez utiliser trois balises de moustache:
<div> {{{brut_html}}} </div>
Les contenus sont insérés sous forme de chaînes HTML - la liaison des données sera ignorée. Si vous devez réutiliser les fragments de modèle, les partiels doivent être utilisés.
Il est très dangereux de rendre dynamiquement HTML arbitraire sur un site Web car il est sujet à [l'attaque XSS] (https://en.wikipedia.org/wiki/cross-site_scripting). N'oubliez pas d'utiliser une interpolation HTML uniquement pour le contenu de confiance et jamais pour le contenu soumis à l'utilisateur.
Fonctionnalités HTML
Les balises de moustache peuvent également être utilisées dans les attributs HTML:
<div id = "item - {{id}}"> </div>
Notez que l'interpolation ne peut pas être utilisée dans les directives Vue.js et les fonctionnalités spéciales. Ne vous inquiétez pas, si la balise moustache est utilisée au mauvais endroit, Vue.js donnera un avertissement.
Bind Expression
Le texte placé dans la balise de moustache est appelé une expression de liaison. Dans Vue.js, une expression liée se compose d'une expression JavaScript simple et éventuellement d'un ou plusieurs filtres.
Expressions JavaScript
Jusqu'à présent, nos modèles sont liés à des clés d'attribut simples. Cependant, en fait, Vue.js prend en charge les expressions JavaScript complètes dans la liaison des données:
{{nombre + 1}}
{{ d'accord ? 'Oui': 'Non'}}
{{message.split (''). Reverse (). JOIN ('')}}
Ces expressions sont évaluées dans le cadre de l'instance Vue à laquelle elles appartiennent. Une limitation est que chaque liaison ne peut contenir qu'une seule expression, donc l'instruction suivante n'est pas valide:
<! - Ceci est une déclaration, pas une expression: ->
{{var a = 1}}
<! - Le contrôle du processus n'est pas non plus possible, vous pouvez utiliser des expressions ternaires à la place->>
{{if (ok) {return message}}}
Filtre
Vue.js permet l'ajout de "filtre" facultatif après une expression, indiquant le "caractère de pipeline":
{{message | capitaliser}}
Ici, nous utiliserons la valeur du message d'expression "tuyau" vers le filtre de capitalisation intégré. Ce filtre n'est en fait qu'une fonction JavaScript qui renvoie la valeur capitalisée. Vue.js fournit plusieurs filtres intégrés, et nous parlerons de la façon de développer nos propres filtres plus tard.
Notez que la syntaxe des tuyaux n'est pas une syntaxe JavaScript, donc les filtres ne peuvent pas être utilisés dans les expressions et ne peuvent être ajoutés qu'à la réflexion après coup de l'expression.
Les filtres peuvent être connectés en série:
{{message | filtera | filterb}}
Le filtre peut également accepter les paramètres:
{{message | filtera 'arg1' arg2}}
La fonction de filtre prend toujours la valeur de l'expression comme premier paramètre. Les arguments cités sont traités comme des chaînes, tandis que les arguments non cités sont calculés comme des expressions. Ici, la chaîne «Arg1» est transmise au filtre comme deuxième paramètre, et la valeur de l'expression Arg2 est calculée comme troisième paramètre.
instruction
Les directives sont des fonctionnalités spéciales avec le préfixe V-. La valeur de la directive est limitée à une expression de liaison, de sorte que les règles d'expression et de filtre JavaScript mentionnées ci-dessus sont également applicables ici. La responsabilité d'une instruction est d'appliquer certains comportements spéciaux au DOM lorsque la valeur de son expression change. Regardons en avant l'exemple dans "Présentation":
<p V-if = "Greeting"> Bonjour! </p>
Ici, la directive V-IF supprimera / inséra l'élément <p> en fonction de l'authenticité de la valeur de salutation de l'expression.
paramètre
Certaines instructions peuvent être séparées par un "argument" après son nom et un côlon au milieu. Par exemple, la directive V-Bind est utilisée pour mettre à jour de manière réactive les fonctionnalités HTML:
<a V-Bind: href = "URL"> </a>
Ici, HREF est un paramètre, qui indique à la directive V-Bind de lier l'attribut HREF de l'élément à la valeur de l'URL d'expression. Vous avez peut-être remarqué que vous pouvez utiliser l'interpolation des fonctionnalités {% brut%} href = "{{url}}" {% Endraw%} pour obtenir le même résultat: c'est correct, et en fait, l'interpolation de fonctionnalité interne sera convertie en liaison V-Bind.
Un autre exemple est la directive V-on, qui est utilisée pour écouter les événements DOM:
<a v-on: click = "dosomething">
Ce paramètre est le nom de l'événement écouté. Nous expliquerons également la liaison des événements en détail.
Modificateur
Les modificateurs sont des suffixes spéciaux en commençant par des périodes de demi-largeur. Ils sont utilisés pour indiquer que les instructions doivent être liées d'une manière spéciale. Par exemple, le modificateur .Literal indique à la directive d'analyser sa valeur dans une chaîne littérale au lieu d'une expression:
<A V-Bind: href.literal = "/ a / b / c"> </a>
Bien sûr, cela ne semble pas logique, car nous avons juste besoin d'utiliser href = "/ a / b / c" sans avoir à utiliser une seule instruction. Cet exemple est simplement de démontrer la syntaxe. Plus tard, nous verrons des usages plus pratiques des modificateurs.
abréviation
Le préfix V est un indice visuel qui identifie une fonction Vue spécifique dans un modèle. Ces préfixes peuvent être une bonne distinction lorsque vous devez ajouter un comportement dynamique à un code HTML existant. Mais lorsque vous utilisez des instructions courantes, vous sentirez que c'est toujours aussi réaliste et verbeux. Et lors de la création d'une seule application de page (SPA), Vue.js gérera tous les modèles, et le préfixe V n'est pas si important pour le moment. Par conséquent, Vue.js fournit des abréviations spéciales pour les deux directives les plus couramment utilisées V-Bind et V-on:
Abréviation de la liaison V
<! - Syntaxe complète -> <A V-Bind: href = "url"> </a> <! - Abréviation -> <a: href = "url"> </a> <! - Syntaxe complète -> <Button V-Bind: Disabled - SomeDamicCondition "> Button </ / bouton> <! : Disabled = "SomedynAmicCondition"> Button </fontificateur>
Abréviation V-on
<! - Syntaxe complète -> <a v-on: click = "dosomething"> </a> <! - Abréviation -> <a @ click = "Dosomething"> </a>
Ils ont l'air un peu différent du HTML "légal", mais ils sont correctement analysés dans tous les navigateurs compatibles Vue.js et n'apparaissent pas dans la balise finale rendue. La grammaire d'abréviation est complètement facultative, mais lorsque vous apprenez étape par étape, vous serez heureux de les avoir.
Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.