Vue.js doit apprendre chaque jour la liaison de données bidirectionnelle

Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML，且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板，请记住这点。

插值

文本

数据绑定最基础的形式是文本插值，使用 “Mustache” 语法（双大括号）：

45a2772a6b6107b401db3c9b82c049c2Message: {{ msg }}54bdf357c58b8a65c66d7c19c8e4d114

Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。

你也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：

45a2772a6b6107b401db3c9b82c049c2This will never change: {{* msg }}54bdf357c58b8a65c66d7c19c8e4d114

原始的 HTML

双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串，需要用三 Mustache 标签：

dc6dce4a544fdca2df29d5ac0ea9906b{{{ raw_html }}}16b28748ea4df4d9c2150843fecfba68

内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断，应当使用 partials。

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。记住，只对可信内容使用 HTML 插值，**永不**用于用户提交的内容。

HTML 特性

Mustache 标签也可以用在 HTML 特性 (Attributes) 内：

02d2b8f69afd719d73188be9022421d916b28748ea4df4d9c2150843fecfba68

Notez que l'interpolation ne peut pas être utilisée dans les directives et fonctionnalités spéciales de Vue.js. Ne vous inquiétez pas, Vue.js vous avertira si la balise Moustache est utilisée au mauvais endroit.

Expression de liaison

Le texte placé à l'intérieur de la balise Moustache est appelé une expression de liaison. Dans Vue.js, une expression de liaison consiste en une simple expression JavaScript et éventuellement un ou plusieurs filtres.

Expressions JavaScript

Jusqu'à présent, nos modèles n'étaient liés qu'à de simples clés de propriété. Cependant, Vue.js prend en charge les expressions JavaScript complètes dans la liaison de données :

{{ number 1 }}

{{ ok ?

{{ message.split('').reverse().join('') }}

Ces expressions seront é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 :

6dc5e2ae2ed6c5090a909d22194530a5

{{ var a = 1 }}

104c945aca7d40211d72db31b2f15143

{{ if (ok) { return message } } }

Filtre

Vue.js permet d'ajouter un "Filtre" facultatif après l'expression, indiqué par le "caractère barre verticale" :

{{ message | >Ici, nous "dirigons" la valeur du message d'expression vers le filtre de capitalisation intégré. Ce filtre est en fait juste une fonction JavaScript qui renvoie la valeur en majuscule. Vue.js fournit plusieurs filtres intégrés, et nous expliquerons plus tard comment développer vos propres filtres.

Notez que la syntaxe des tubes n'est pas la syntaxe JavaScript, les filtres ne peuvent donc pas être utilisés dans les expressions, mais ne peuvent être ajoutés qu'après l'expression.

Les filtres peuvent être concaténés :

{{ message | filterA | filterB }>

Les filtres peuvent également accepter des paramètres :

{{ message | filterA ' arg1' arg2 }}

Les fonctions de filtre prennent toujours la valeur d'une expression comme premier argument. Les paramètres entre guillemets sont traités comme des chaînes, tandis que les paramètres sans guillemets sont évalués comme des expressions. Ici, la chaîne « arg1 » est transmise au filtre comme deuxième argument et la valeur de l'expression arg2 est évaluée comme troisième argument.

Directives

Les directives sont des fonctionnalités spéciales préfixées par v-. La valeur de la directive est limitée à une expression de liaison, donc les règles d'expression JavaScript et de filtre mentionnées ci-dessus s'appliquent également ici. La responsabilité d'une directive est d'appliquer un comportement spécial au DOM lorsque la valeur de son expression change. Reprenons l'exemple dans "Aperçu" :

fca80fab631d6c66ff12d51e112618b1Bonjour !94b3e26ee717c64999d7867364b1b4a3

Ici, la directive v-if sera basé sur La valeur de salutation de l'expression vraie ou fausse supprime/insère l'élément e388a4556c0f65e1904146cc1a846bee

Paramètre

Certaines commandes peuvent avoir un "argument" après leur nom, séparé par deux points. Par exemple, la directive v-bind est utilisée pour mettre à jour les fonctionnalités HTML de manière réactive :

16e870cf50e90f7deae53a5851f2cc775db79b134e9f6b82c0b36e0489ee08ed

Ici href est le paramètre, il indique à la directive v-bind de lier l'attribut href de l'élément à la valeur de l'url de l'expression. Vous avez peut-être remarqué que vous pouvez obtenir le même résultat avec l'interpolation de fonctionnalités {% raw %}href="{{url}}"{% endraw %} : c'est correct, et en fait, l'interpolation de fonctionnalités en interne est convertie en liaison v-bind .

Un autre exemple est la directive v-on, qui est utilisée pour écouter les événements DOM :

913ab33578b43051d8ce890f7743009b

Ce paramètre est le nom de l'événement surveillé. Nous expliquerons également la liaison d'événements en détail.

Modificateurs

Les Modificateurs (Modificateurs) sont des suffixes spéciaux commençant par un point demi-largeur., 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 comme une chaîne littérale plutôt que comme une expression :

7c0f991b5451b1dec9555cce44066b3e 5db79b134e9f6b82c0b36e0489ee08ed

Bien sûr, cela ne semble pas avoir de sens, puisqu'il suffit d'utiliser href="/a/b/c" au lieu d'utiliser une directive. Cet exemple sert simplement à démontrer la syntaxe. Nous verrons plus tard des utilisations plus pratiques des modificateurs.

Abréviation

Le préfixe v- est un repère visuel qui identifie une fonctionnalité Vue spécifique dans le modèle. Ces préfixes peuvent faire la différence lorsque vous devez ajouter un comportement dynamique à du code HTML existant. Mais lorsque vous utilisez des instructions courantes, vous aurez l’impression qu’écrire ainsi est vraiment verbeux. Et lors de la création d'une application monopage (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 instructions les plus couramment utilisées, v-bind et v-on :

abréviation v-bind

abréviation v-on

<!-- 完整语法 -->
<a v-bind:href="url"></a>
 
<!-- 缩写 -->
<a :href="url"></a>
 
<!-- 完整语法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>
 
<!-- 缩写 -->
<button :disabled="someDynamicCondition">Button</button>

Ils sont un peu différents du HTML "légal", mais ils sont analysés correctement dans tous les navigateurs pris en charge par Vue.js et n'apparaissent pas dans le balisage final rendu. La syntaxe des abréviations est totalement facultative, mais au fur et à mesure que vous apprendrez étape par étape, vous serez heureux de les avoir.

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
 
<!-- 缩写 -->
<a @click="doSomething"></a>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles liés à la liaison de données bidirectionnelle que Vue.js doit apprendre chaque jour, veuillez faire attention au site Web PHP chinois !