Vue.js Vue.js Директивы

v-текст
v-один раз
v-html-код
v-привязка
Двусторонняя привязка с использованием v-образной модели
Использование выражений
Условные обозначения
Петли
События
Показывать или скрывать
Модификаторы директив событий
Пользовательские директивы

Мы видели в Vue.js шаблоны и интерполяции как вы можете вставлять данные в шаблоны Vue.

В этой статье объясняется другая техника, предлагаемая Vue.js в шаблонах: директивы .

Директивы, в основном, похожи на атрибуты HTML, которые добавляются внутри шаблонов. Все они начинаются с v- , чтобы указать, что это специальный атрибут Vue.

Давайте подробно рассмотрим каждую из директив Vue.

v-текст

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

v-один раз

Вы знаете, как {{имя}} привязывается к свойству имя данных компонента.

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

Если только вы не используете директиву v-once , которая в основном похожа на атрибут HTML:

{{ name }}

v-html-код

Когда вы используете интерполяцию для печати свойства данных, HTML-код экранируется. Это отличный способ, который Vue использует для автоматической защиты от XSS-атак.

Однако бывают случаи, когда вы хотите вывести HTML-код и заставить браузер интерпретировать его. Вы можете использовать директиву v-html :

v-привязка

Интерполяция работает только в содержимом тега. Вы не можете использовать его для атрибутов.

Атрибуты должны использовать v-привязку :

{{ linkText }}

v-привязка настолько распространена, что для нее существует сокращенный синтаксис:

{{ linkText }}
{{ linkText }}

Двусторонняя привязка с использованием v-образной модели

v-модель позволяет нам, например, привязать элемент ввода формы и заставить его изменять свойство данных Vue, когда пользователь изменяет содержимое поля:


Message is: {{ message }}


Fruit chosen: {{ selected }}

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

Вы можете использовать любое выражение JavaScript внутри директивы:

{{ linkText }}

Любая переменная, используемая в директиве, ссылается на соответствующее свойство данных.

Условные обозначения

Внутри директивы вы можете использовать тернарный оператор для выполнения условной проверки, так как это выражение:

Существуют специальные директивы, которые позволяют выполнять более организованные условные обозначения: v-если , v-иначе и v-иначе-если .

Hey!

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

Петли

v-для позволяет отображать список элементов. Используйте его в сочетании с v-привязкой , чтобы задать свойства каждого элемента в списке.

Вы можете выполнять итерацию по простому массиву значений:

Или на массив объектов:

v-для может дать вам индекс, используя:

События

зона позволяет прослушивать события DOM и запускать метод при наступлении события. Здесь мы прослушиваем событие щелчка:

Вы можете передать параметры любому событию:

и небольшие фрагменты JavaScript (одно выражение) могут быть помещены непосредственно в шаблон:

щелчок – это всего лишь один из видов событий. Распространенным событием является отправить , которое вы можете привязать с помощью v-on:отправить .

фон настолько распространен, что для него существует сокращенный синтаксис, @ :

Click me!
Click me!

Более подробная информация о v-on в События Vue

Показывать или скрывать

Вы можете выбрать отображение элемента в DOM только в том случае, если определенное свойство экземпляра Vue имеет значение true, используя v-show :

Something

Элемент по-прежнему вставляется в DOM, но для него установлено значение отображать: нет , если условие не выполняется.

Модификаторы директив событий

Vue предлагает некоторые дополнительные модификаторы событий, которые вы можете использовать совместно с von , которые автоматически заставляют событие что-то делать без вашего явного кодирования в обработчике событий.

Одним из хороших примеров является .prevent , который автоматически вызывает preventDefault() для события.

В этом случае форма не приводит к перезагрузке страницы, что является поведением по умолчанию:

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

Пользовательские директивы

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

Читать https://vuejs.org/v2/guide/custom-directive.html если вам интересно узнать больше.

Оригинал: “https://flaviocopes.com/vue-directives/”