Vue.js

Оформление

Оглавление

Встроенные директивы ​

v-text ​

Обновление текстового содержимого элемента.

  • Ожидается: string

  • Подробности

    v-text работает, устанавливая свойство textContent элемента, поэтому он будет перезаписывать любое существующее содержимое внутри элемента. Если вам нужно обновить часть textContent, то вместо этого следует использовать интерполяцию усов.

  • Пример

    template
    <span v-text="msg"></span>
<!-- то же, что и -->
<span>{{msg}}</span>

  • Смотрите также Синтаксис шаблона - Интерполяция текста

v-html ​

Обновление innerHTML элемента.

  • Ожидается: string

  • Подробности

    Содержимое v-html вставляется как обычный HTML — синтаксис шаблонов Vue не будет обработан. Если вы пытаетесь скомпоновать шаблоны с помощью v-html, попробуйте переосмыслить решение, используя вместо этого компоненты.

    Примечание по безопасности

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

    В однофайловых компонентах стили scoped не будут применяться к содержимому внутри v-html, поскольку этот HTML не обрабатывается компилятором шаблонов Vue. Если вы хотите нацелить v-html контент с помощью развёрнутого CSS, вы можете использовать CSS-модули или дополнительный, глобальный <style> элемент с ручной стратегией развёртки, такой как BEM.

  • Пример

    template
    <div v-html="html"></div>

  • Смотрите также Синтаксис шаблона - Необработанный HTML

v-show ​

Переключает видимость элемента в зависимости от истинности значения выражения.

  • Ожидается: any

  • Подробности

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

  • Смотрите также Отрисовка по условию - v-show

v-if ​

Условное отображение элемента или фрагмента шаблона на основе истинности значения выражения.

  • Ожидается: any

  • Подробности

    При переключении элемента v-if элемент и содержащиеся в нем директивы/компоненты уничтожаются и создаются заново. Если начальное условие ложноподобное, то внутреннее содержимое не будет отображаться вообще.

    Может использоваться в <template> для обозначения условного блока, содержащего только текст или несколько элементов.

    Эта директива запускает переходы при изменении своего состояния.

    При совместном использовании v-if имеет более высокий приоритет, чем v-for. Мы не рекомендуем использовать эти две директивы вместе в одном элементе — подробности см. в руководстве Отрисовка списков.

  • Смотрите также Отрисовка по условию - v-if

v-else ​

Указание «блока else» для v-if или цепочки v-if / v-else-if.

  • Не ожидает выражения

  • Подробности

    • Ограничение: предыдущий родственный элемент должен иметь v-if или v-else-if.

    • Может использоваться в <template> для обозначения условного блока, содержащего только текст или несколько элементов.

  • Пример

    template
    <div v-if="Math.random() > 0.5">
  Сейчас вы меня видите
</div>
<div v-else>
  А сейчас нет
</div>

  • Смотрите также Отрисовка по условию - v-else

v-else-if ​

Указание блока «else if» для v-if. Может быть соединен в цепочку.

  • Ожидается: any

  • Подробности

    • Ограничение: предыдущий родственный элемент должен иметь v-if или v-else-if.

    • Может использоваться в <template> для обозначения условного блока, содержащего только текст или несколько элементов.

  • Пример

    template
    <div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Не A/B/C
</div>

  • Смотрите также Отрисовка по условию - v-else-if

v-for ​

Многократное отображение элемента или блока шаблона на основе исходных данных.

  • Ожидается: Array | Object | number | string | Iterable

  • Подробности

    Значение директивы должно использовать специальный синтаксис alias in expression, чтобы предоставить псевдоним для текущего элемента, над которым выполняется итерация:

    template
    <div v-for="item in items">
  {{ item.text }}
</div>

    Кроме того, вы можете указать псевдоним для индекса (или ключа, если он используется для объекта):

    template
    <div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

    Поведение v-for по умолчанию будет пытаться исправлять элементы на месте, не перемещая их. Чтобы заставить его упорядочить элементы, необходимо указать подсказку для упорядочивания с помощью специального атрибута key:

    template
    <div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

    v-for также может работать со значениями, которые реализуют Iterable Protocol, включая нативные Map и Set.

  • Смотрите также Отрисовка списков

v-on ​

Прикрепление к элементу слушателя событий.

  • Короткий синтаксис: @

  • Ожидается: Function | Inline Statement | Object (без аргумента)

  • Аргумент: event (необязательно, если используется синтаксис объекта)

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

    • .stop - вызов event.stopPropagation().
    • .prevent - вызов event.preventDefault().
    • .capture - добавление слушателя событий в режиме захвата.
    • .self - запуск обработчика только в том случае, если событие было отправлено от этого элемента.
    • .{keyAlias} - запуск обработчика только на определённых клавишах.
    • .once - запуск обработчика не более одного раза.
    • .left - запуск обработчика только для событий левой кнопки мыши.
    • .right - запуск обработчика только для событий правой кнопки мыши.
    • .middle - запуск обработчика только для событий средней кнопки мыши.
    • .passive - присоединение события DOM с { passive: true }.

  • Подробности

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

    При использовании на обычном элементе он слушает только нативные события DOM. При использовании на компоненте пользовательского элемента, он прослушивает пользовательские события, испускаемые на этом дочернем компоненте.

    При прослушивании нативных событий DOM метод получает собственное событие в качестве единственного аргумента. Если используется встроенное выражение, то утверждение имеет доступ к специальному свойству $event: v-on:click="handle('ok', $event)".

    v-on также поддерживает привязку к объекту пары событие/слушатель без аргумента. Обратите внимание, что при использовании синтаксиса объекта он не поддерживает никаких модификаторов.

  • Пример

    template
    <!-- обработчик метода -->
<button v-on:click="doThis"></button>

<!-- динамическое событие -->
<button v-on:[event]="doThis"></button>

<!-- встроенное выражение -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- короткий синтаксис -->
<button @click="doThis"></button>

<!-- сокращённое обозначение динамического события -->
<button @[event]="doThis"></button>

<!-- остановка распространения (stop propagation) -->
<button @click.stop="doThis"></button>

<!-- игнорирование поведения по умолчанию (prevent default) -->
<button @click.prevent="doThis"></button>

<!-- игнорирование поведения по умолчанию без выражения -->
<form @submit.prevent></form>

<!-- цепочка модификаторов -->
<button @click.stop.prevent="doThis"></button>

<!-- модификатор клавиш с помощью KeyAlias -->
<input @keyup.enter="onEnter" />

<!-- событие щелчка будет вызвано не более одного раза -->
<button v-on:click.once="doThis"></button>

<!-- синтаксис объекта -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

    Прослушивание пользовательских событий на дочернем компоненте (обработчик вызывается, когда «my-event» излучается на дочернем элементе):

    template
    <MyComponent @my-event="handleThis" />

<!-- встроенное выражение -->
<MyComponent @my-event="handleThis(123, $event)" />

  • Смотрите также

v-bind ​

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

  • Короткий синтаксис:

    • : или . (при использовании модификатора .prop)
    • Без указания значения (когда атрибут и связанное значение имеют одинаковое имя, требуется 3.4+)

  • Ожидается: any (с аргументом) | Object (без аргумента)

  • Аргумент: attrOrProp (опционально)

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

    • .camel - преобразование имени атрибута из «шашлычного» регистра в «верблюжий» (kebab-case => camelCase).
    • .prop - установка привязки в качестве свойства DOM. (3.2+)
    • .attr - установка привязки в качестве атрибута DOM. (3.2+)

  • Использование

    При использовании для привязки атрибута class или style, v-bind поддерживает дополнительные типы значений, такие как Array или Objects. Более подробную информацию см. в разделе «Руководство по использованию ссылок» ниже.

    При установке привязки к элементу Vue по умолчанию проверяет, есть ли у элемента ключ, определённый как свойство, с помощью проверки оператора in. Если свойство определено, Vue установит его значение как свойство DOM, а не как атрибут. Это должно работать в большинстве случаев, но вы можете переопределить это поведение, явно используя модификаторы .prop или .attr. Иногда это необходимо, особенно при работе с пользовательскими элементами.

    При использовании для привязки параметра компонента он должен быть правильно объявлен в дочернем компоненте.

    При использовании без аргумента может использоваться для связывания объекта, содержащего пары имён-значений атрибутов.

  • Пример

    template
    <!-- привязка атрибута -->
<img v-bind:src="imageSrc" />

<!-- динамическое имя атрибута -->
<button v-bind:[key]="value"></button>

<!-- короткий синтаксис -->
<img :src="imageSrc" />

<!-- сокращённое имя динамического атрибута -->
<button :[key]="value"></button>

<!-- со встроенной конкатенацией строк -->
<img :src="'/path/to/images/' + fileName" />

<!-- привязка класса -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- привязка стиля -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- связывание объекта с атрибутами -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- привязка prop. "prop" должен быть объявлен в дочернем компоненте. -->
<MyComponent :prop="someThing" />

<!-- передача родительских параметров, общих с дочерним компонентом -->
<MyComponent v-bind="$props" />

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

    Модификатор .prop также имеет специальное сокращение, .:

    template
    <div :someProperty.prop="someObject"></div>

<!-- эквивалентно -->
<div .someProperty="someObject"></div>

    Модификатор .camel позволяет изменять имя атрибута v-bind при использовании шаблонов в DOM. Пример с атрибутом SVG viewBox:

    template
    <svg :view-box.camel="viewBox"></svg>

    .camel не нужен, если вы используете строковые шаблоны или предварительно компилируете шаблон на этапе сборки.

  • Смотрите также

v-model ​

Создание двусторонней привязки к элементу ввода формы или компоненту.

v-slot ​

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

  • Короткий синтаксис: #

  • Ожидается: Выражение JavaScript, допустимое в позиции аргумента функции, включая поддержку деструктуризации. Необязательный — нужен только в том случае, если ожидается передача параметров в слот.

  • Аргумент: имя слота (необязательно, по умолчанию default)

  • Ограничено:

    • <template>
    • компоненты (для одиночного слота по умолчанию с параметром)

  • Пример

    template
    <!-- Именованные слоты -->
<BaseLayout>
  <template v-slot:header>
    Шапка
  </template>

  <template v-slot:default>
    Содержимое слота по умолчанию
  </template>

  <template v-slot:footer>
    Подвал
  </template>
</BaseLayout>

<!-- Именованные слоты с параметрами -->
<InfiniteScroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</InfiniteScroll>

<!-- Слот по умолчанию, принимающий параметры, с деструктуризацией -->
<Mouse v-slot="{ x, y }">
  Позиция курсора мыши: {{ x }}, {{ y }}
</Mouse>

  • Смотрите также Компоненты - Слоты

v-pre ​

Пропуск компиляции для этого элемента и всех его дочерних элементов.

  • Не ожидает выражения

  • Подробности

    Внутри элемента с v-pre весь синтаксис шаблонов Vue будет сохранён и отображён как есть. Наиболее распространённый вариант использования этого метода — отображение необработанных тегов усов.

  • Пример

    template
    <span v-pre>{{ это не будет скомпилировано }}</span>

v-once ​

Отрисовка элемента и компонента только один раз и пропуск последующих обновлений.

  • Не ожидает выражения

  • Подробности

    При последующих повторных отрисовках этот элемент/компонент и все его дочерние элементы будут рассматриваться как статическое содержимое и пропускаться. Это можно использовать для оптимизации производительности обновления.

    template
    <!-- одиночный элемент -->
<span v-once>Это никогда не изменится: {{msg}}</span>
<!-- элемент имеет дочерние элементы -->
<div v-once>
  <h1>Комментарий</h1>
  <p>{{msg}}</p>
</div>
<!-- компонент -->
<MyComponent v-once :comment="msg"></MyComponent>
<!-- директива `v-for` -->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

    Начиная с версии 3.2, вы также можете мемоизировать часть шаблона с условиями недействительности, используя v-memo.

  • Смотрите также

v-memo ​

  • Поддерживается только в версии 3.2+

  • Ожидается: any[]

  • Подробности

    Запоминает поддерево шаблона. Можно использовать как на элементах, так и на компонентах. Директива ожидает массив значений зависимостей фиксированной длины для сравнения при мемоизации. Если все значения в массиве совпадут с последней отрисовкой, то обновление всего поддерева будет пропущено. Например:

    template
    <div v-memo="[valueA, valueB]">
  ...
</div>

    При повторной отрисовке компонента, если valueA и valueB остаются неизменными, все обновления для этого <div> и его дочерних элементов будут пропущены. Фактически, даже создание виртуального узла DOM также будет пропущено, поскольку мемоизированная копия поддерева может быть использована повторно.

    Важно правильно указать массив мемоизации, иначе мы можем пропустить обновления, которые действительно должны быть применены. v-memo с пустым массивом зависимостей (v-memo="[]") будет функционально эквивалентен v-once.

    Usage with v-for

    v-memo предоставляется исключительно для микрооптимизации в критических по производительности сценариях и может понадобиться крайне редко. Чаще всего это может оказаться полезным при отображении больших списков v-for (где length > 1000):

    template
    <div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
  <p>...больше дочерних узлов</p>
</div>

    При изменении состояния selected компонента будет создано большое количество узлов, даже если большинство элементов остались прежними. Использование v-memo здесь, по сути, говорит: «Обновляйте этот элемент только в том случае, если он перешел из разряда невыбранных в разряд выбранных, или наоборот». Это позволяет каждому незатронутому элементу повторно использовать свой предыдущий узел и полностью отказаться от диффузии. Обратите внимание, что нам не нужно включать item.id в массив зависимостей memo, так как Vue автоматически определяет его из :key элемента.

    Предупреждение

    При использовании v-memo с v-for убедитесь, что они применяются к одному и тому же элементу. v-memo не работает внутри v-for..

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

  • Смотрите также v-once

v-cloak ​

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

  • Не ожидает выражения

  • Подробности

    Эта директива необходима только в пакетах без этапов сборки.

    При использовании шаблонов в DOM может возникнуть «вспышка некомпилированных шаблонов»: пользователь может видеть необработанные теги усов до тех пор, пока установленный компонент не заменит их отрисованным содержимым.

    v-cloak будет оставаться на элементе до тех пор, пока не будет смонтирован связанный с ним экземпляр компонента. В сочетании с правилами CSS, такими как [v-cloak] { display: none }, его можно использовать для скрытия необработанных шаблонов до тех пор, пока компонент не будет готов.

  • Пример

    css
    [v-cloak] {
  display: none;
}
    template
    <div v-cloak>
  {{ message }}
</div>

    <div> не будет виден до завершения компиляции.

Редактировать эту страницу на GitHub