Vue.js
Liaison de données

Texte

La forme la plus élémentaire de la liaison de données est l’interpolation de texte utilisant la syntaxe «Moustache» (accolades doubles):

<span>Message: {{ msg }}</span>

La balise moustache sera remplacée par la valeur de la propriété msg sur l'objet de données correspondant. Il sera également mis à jour chaque fois que la propriété msg l'objet de données change.

Vous pouvez également effectuer des interpolations ponctuelles qui ne sont pas mises à jour lors du changement de données:

<span>This will never change: {{* msg }}</span>

HTML brut

La double moustache interprète les données en texte brut, pas en HTML. Afin de générer du vrai HTML, vous devrez utiliser des moustaches triples:

<div>{{{ raw_html }}}</div>

Le contenu est inséré en tant que HTML simple - les liaisons de données sont ignorées. Si vous devez réutiliser des éléments de modèle, vous devez utiliser des partiels.

Les attributs

Les moustaches peuvent également être utilisées dans les attributs HTML:

<div id="item-{{ id }}"></div>

Notez que les interpolations d'attribut sont interdites dans les directives Vue.js et les attributs spéciaux. Ne vous inquiétez pas, Vue.js émettra des avertissements pour vous lorsque des moustaches sont utilisées à des endroits inappropriés.

Des filtres

Vue.js vous permet d'ajouter des «filtres» facultatifs à la fin d'une expression, désignés par le symbole «pipe»:

{{ message | capitalize }}

Ici, nous «canalisons» la valeur de l'expression du message via le filtre intégré en capitalize , qui est en fait une simple fonction JavaScript qui renvoie la valeur en majuscule. Vue.js fournit un certain nombre de filtres intégrés, et nous parlerons de la manière d'écrire vos propres filtres ultérieurement.

Notez que la syntaxe de tube ne fait pas partie de la syntaxe JavaScript. Par conséquent, vous ne pouvez pas mélanger les filtres dans les expressions. vous ne pouvez les ajouter qu'à la fin d'une expression.

Les filtres peuvent être chaînés:

{{ message | filterA | filterB }}

Les filtres peuvent également prendre des arguments:

{{ message | filterA 'arg1' arg2 }}

La fonction de filtre reçoit toujours la valeur de l'expression comme premier argument. Les arguments cités sont interprétés comme une chaîne simple, tandis que les arguments non cités seront évalués comme des expressions. Ici, la chaîne 'arg1' caractères 'arg1' sera transmise dans le filtre en tant que second argument, et la valeur de l'expression arg2 sera évaluée et transmise en tant que troisième argument.