Vue.js
Связывание данных

Текст

Наиболее простой формой привязки данных является интерполяция текста с использованием синтаксиса «Усы» (двойные фигурные скобки):

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

Тег усы будет заменен значением свойства msg на соответствующем объекте данных. Он также будет обновляться всякий раз, когда изменяется свойство msg объекта объекта.

Вы также можете выполнять одноразовые интерполяции, которые не обновляются при изменении данных:

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

Сырой HTML

Двойные усы интерпретируют данные как обычный текст, а не HTML. Для вывода реального HTML вам нужно будет использовать тройные усы:

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

Содержимое вставляется в виде простого HTML - привязки данных игнорируются. Если вам нужно повторно использовать шаблоны, вы должны использовать частичные.

Атрибуты

Усы также можно использовать внутри атрибутов HTML:

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

Обратите внимание, что интерполяции атрибутов запрещены в директивах Vue.js и специальных атрибутах. Не беспокойтесь, Vue.js поднимет вам предупреждения, когда усы будут использоваться в неправильных местах.

фильтры

Vue.js позволяет добавлять дополнительные «фильтры» в конец выражения, обозначаемого символом «pipe»:

{{ message | capitalize }}

Здесь мы «труба» значение message выражения через встроенные capitalize фильтр, который на самом деле просто функция JavaScript , которая возвращает значение капитализированного. Vue.js предоставляет ряд встроенных фильтров, и мы поговорим о том, как писать собственные фильтры позже.

Обратите внимание, что синтаксис канала не является частью синтаксиса JavaScript, поэтому вы не можете смешивать фильтры внутри выражений; вы можете добавлять их только в конце выражения.

Фильтры могут быть связаны:

{{ message | filterA | filterB }}

Фильтры также могут принимать аргументы:

{{ message | filterA 'arg1' arg2 }}

Функция фильтра всегда принимает значение выражения в качестве первого аргумента. Котируемые аргументы интерпретируются как простая строка, а не цитируемые - будут вычисляться как выражения. Здесь простая строка 'arg1' будет передана в фильтр в качестве второго аргумента, а значение выражения arg2 будет оценено и передано в качестве третьего аргумента.