Все Vue директивы начинаются с префикса v- .
v-text: директива v-text имеет ту же реактивность, что и интерполяция. Интерполяция
c {{ }} более эффективена, чем директива v-text. Однако вы можете оказаться в
ситуации, когда у вас есть предварительно отрендеренный текст с сервера и вы хотите переопределить его после того, как ваше Vue
приложение завершило загрузку. Например, вы можете предварительно определить статический текст-заполнитель, в то время как
движок Vue в конечном итоге заменит его динамическим значением, полученным из v-text,
как показано в следующем блоке кода:
<template>
<div v-text="msg">My placeholder</div>
</template>
<script setup>
const msg = "My message"
</script>При таком подходе, строка My placeholder, будет заменена программно, переменной msg. В нашем коде каких то особых выгод от данного подхода мы не видим, но если данные приходят с сервера с некоторой задержкой, это может быть полезно.
v-once: при использовании указывает начальную точку статического содержимого. Движок Vue будет отображать
компонент с этим атрибутом и его дочерние элементы ровно один раз. Он также игнорирует все обновления данных
для этого компонента или элемента после начальной визуализации. Этот атрибут удобен для сценариев где
для некоторых частей реактивность не требуется. Вы можете комбинировать v-once с v-text интерполяцией,
и любой другой директивой Vue.
v-html: Vue проанализирует значение, переданное этой директиве, и отобразит ваши текстовые данные как HTML-код в целевой элемент. Мы не рекомендуем использовать эту директиву, особенно на стороне клиента, из-за ее влияния на производительность и потенциальной утечки безопасности. Тег script может быть встроены и запущены с помощью этой директивы, что может вызвать проблемы с безопасностью.
v-bind: эта директива является одной из самых популярных функций Vue. Вы можете использовать эту директиву для
включения одностороннюю привязку переменной данных или выражения к атрибуту HTML, как показано на
следующем примере:
<template>
<img v-bind:src="logo" />
</template>
<script setup>
const logo = '../assets/logo.png';
</script>В предыдущем коде показано, как привязать переменную данных логотипа к
src атрибуту изображения. Компонент img теперь принимает исходное значение из переменной logo и отображает изображение соответствующим образом.
Вы также можете использовать его для передачи локальной переменной в качестве атрибута другому
компоненту. Более короткий способ — использовать синтаксис :attr вместо v-bind:attr.
Возьмем, к примеру, предыдущий пример. Мы можем переписать шаблон так:
<template>
<img :src="logo" />
</template>v-if: это мощная директива, которую вы можете использовать для условного управления отображением элементов.
внутри компонента. Эта директива работает как условия if…else и if…else if….
Он поставляется со вспомогательными директивами, такими как v-else, обозначающий случай else, и else-if , обозначающий случай else if . Например, мы хотим отображать другой текст, когда count равен 2, 4 и 6. Следующий код демонстрирует, как это сделать:
<template>
<div v-if="count === 2">Текст 2</div>
<div v-else-if="count === 4">Текст 4</div>
<div v-else-if="count === 6">Текст 6</div>
<div v-else>Другой текст</div>
</template>v-show: вы также можете управлять видимым состоянием HTML-элементов с помощью v-show. В отличие от
v-если с v-show движок Vue по-прежнему монтирует элемент в дерево DOM, но скрывает его
с использованием стилей - display:none.
Вы по-прежнему можете видеть содержимое скрытого элемента отображается в дереве DOM, при его проверке, но данные не будут отображается в пользовательском интерфейсе для конечных пользователей. Эта директива не работает с v-else или v-else-if. Если v-show возвращает истинное логическое значение, она оставит элемент DOM как есть. Если возвратится false, она применить стиль - display:none для элемента.
v-for: мы используем директиву v-for для рендеринга списка на основе источника данных. Источник данных — это повторяющийся набор данных, например массив или объект. Мы будем погружаться глубже в различные варианты использования этой директивы в других статьях.
Мы рассмотрели наиболее распространенные директивы в Vue. Давайте рассмотрим и поэкспериментируем с тем, как использовать эти директивы в следующем упражнении.