Vue также предоставляет специальные атрибуты HTML, называемые директивами. Директива объявляется в открывающем теге
элемента HTML и будет влиять или обеспечивать динамическое поведение или функциональность этого элемента. Мы
также можем создавать собственные директивы в Vue. Те, что предусмотрены фреймворком, имеют специальные обозначения.
начиная с v-. Что касается цели этой книги, давайте объясним наиболее часто используемые директивы Vue:
v-bind: (shorthand ":")
Директива v-bind: привязывает значение атрибута HTML к значению переменной JavaScript.
Если переменная является реактивной, каждый раз, когда она обновляет свое значение, это будет отражено в HTML. Если переменная
не является реактивным, он будет использоваться только один раз во время первоначального рендеринга HTML. Чаще всего мы
используйте только сокращенный префикс : (точка с запятой). Например, реактив my_profile_picture
переменная содержит веб-адрес изображения:
<img :src="my_profile_picture">
Атрибут src получит значение переменной my_profile_picture.
v-show
Эта директива покажет или скроет элемент, не удаляя его из документа. Это эквивалентно
изменение атрибута отображения CSS. Он ожидает переменную, которая дает логическое значение (или что-то в этом роде).
это можно интерпретировать как истинное или непустое). Например, переменная загрузки имеет логическое значение:
<div v-show="loading">…</div>
Элемент div появится, когда переменная загрузки имеет значение true.
Важно иметь в виду, что v-show будет использовать стиль объекта для его отображения или нет, но
элемент по-прежнему будет частью объектной модели документа (DOM).
v-if, v-else, and v-else-if
Эти директивы ведут себя так же, как и следовало ожидать от условных предложений в JavaScript, показывая и
скрытие элемента на основе значения, разрешенного переданным выражением. Они похожи на v-show
в том смысле, что покажут или скроют элемент, но с той разницей, что уберут полностью
элемент из DOM. Из-за этого при неправильном использовании он может оказаться дорогостоящим в вычислительном отношении.
в большом масштабе с элементами, которые часто меняют свое состояние, поскольку фреймворку приходится выполнять больше
операции по манипулированию DOM, в отличие от v-show, когда нужно изменить только стиль отображения.
Примечание
Используйте v-if, чтобы показать или отобразить элементы, которые не будут переключаться после отображения или скрытия (и предпочтительно
когда исходное состояние скрыто). Используйте v-show, если элемент часто меняет состояния. Это будет
улучшить производительность при отображении больших списков элементов.
v-for и :key
Эти два атрибута в сочетании ведут себя как цикл for в JavaScript. Они создадут столько же
копии элемента, как предписано в итераторе, каждая с соответствующим интерполированным
ценить. Чрезвычайно полезно отображать коллекции элементов данных. Атрибут :key используется внутри
для более эффективного отслеживания изменений и должен ссылаться на уникальный атрибут объекта
зациклено — например, поле id объекта или индекс в массиве, когда индексы не будут
изменять. Вот пример:
<span v-for="i in 5" :key="i"> {{i}} </span>На веб-странице отобразятся пять элементов диапазона с интерполяцией i, показывающей следующее:
1 2 3 4 5
v-model
Эта директива — чистая магия. При присоединении к элементу ввода (input, textarea, select и т. д.) он будет
присвойте значение, возвращаемое элементом HTML, переменной, на которую указывает ссылка, таким образом сохранив DOM и
Состояние JavaScript в синхронизации – то, что называется двусторонней привязкой. Вот пример:
<input type="text" v-model="name">
Когда пользователь вводит текст в HTML, переменная name в JavaScript сразу же будет иметь это значение.
назначенное значение. В этих примерах мы используем примитивные типы данных, такие как числа и строки, но
мы также можем использовать более сложные значения, такие как объекты или массивы. Подробнее об этом будет в главе 4,
Композиция пользовательского интерфейса с компонентами, когда мы видим компоненты в глубине.
v-on: (and the shorthand @)
Эта директива ведет себя немного иначе, чем те, которые видели раньше. Он ожидает не переменную, а
функцию или выражение и связывает событие HTML с функцией JavaScript для его выполнения. Событие
необходимо объявить сразу после двоеточия. Например, чтобы отреагировать на событие нажатия кнопки,
мы бы написали следующее:
<button v-on:click="printPage()">Print</button>Когда кнопка запускает событие щелчка, функция JavaScript «printPage()» будет
казнен. Кроме того, более часто используется сокращение этой директивы, и с этого момента мы будем использовать его.
on в этой книге: просто замените v-on: на @. Тогда предыдущий пример становится следующим:
<button @click="printPage()">Print</button>
До сих пор мы видели, что приложения Vue 3 состоят из компонентов, которые мы можем использовать в нашем HTML.
и что мы создаем с помощью SFC. Фреймворк также предоставляет нам директивы для управления HTML.
элементы, но это еще не все. В следующем разделе мы увидим, что фреймворк также предоставляет некоторые удобные
готовые компоненты, которые мы можем использовать.