Содержание цикла

1. Article 1
2. Article 2

Вывод текста использует двойные фигурные скобки (еще он называется «усатый синтаксис»). Двойные скобки интерпретируют данные как текст, а не как разметку. Нужно использовать директиву v-html для отображения разметки.

Привязка атрибутов

Фигурные скобки не работают внутри html атрибутов. Здесь используется директива

v-bind:attr = "test"

или сокращенная запись

:attr = "test"

Булевы атрибуты

Могут иметь в значениях true или false. В итоговой разметке будет отображаться, если имеет одно из true значений (можно посмотреть здесь), а если будет false, то атрибут вообще будет пропущен.

Динамическая привязка нескольких атрибутов

Создается объект со значениями атрибутов и в v-bind передается этот объект

const objAttr = {
 id: "elementId",
 class: "elementClass"
}

Использование в компоненте

<div v-bind = "objAttr"></div>

Использование js выражений

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

Ограничение использования глобальных переменных

Выражения в шаблонах изолированы и в них доступны только глобальные переменные из списка. Пользовательские переменные не доступны по умолчанию в выражениях, но их можно добавить через app.config.globalProperties.

Директивы

Это спец атрибуты с префиксом v-. Ссылка на список встроенных директив. Когда значение директивы меняется, то обновляется дом страницы. Некоторые директивы могут принимать аргументы, отделяются от директивы двоеточием. v-bind имеет сокращение :, v-on имеет сокращение @.

Динамические аргументы

Указываются после директивы в квадратных скобках и имеют значение, которое рассчитывается в js выражении. Например, динамический аргумент attribute, а в объявлении объекта Vue должно быть свойство  attribute. Также можно повесить динамический обработчик события. Но есть ограничения на значения динамических атрибутов. Значение динамических атрибутов должно быть строковое или null, если нужно удалить привязку. Передача других типов значений будет вызывать предупреждения.

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

Модификаторы

Это специальные постфиксы, которые отделяются точкой, и обозначают, что директива должна быть привязана специальным образом.