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> з власною стратегією модульності, такою як БЕМ.

  • Приклад:

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

  • Також до вашої уваги: Синтаксис шаблону - чистий HTML

v-show ​

Виконує перемикання видимості елемента залежно від істинності зазначеного виразу.

  • Очікує: any

  • Подробиці

    v-show працює, встановлюючи властивість display CSS за допомогою вбудованих стилів, і намагатиметься враховувати початкове значення 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

  • Подробиці

    Значення директиви має використовувати спеціальний синтаксис псевдонім у виразі, щоб забезпечити псевдонім для поточного елемента, який повторюється:

    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, включаючи рідну Map і Set.

  • Також до вашої уваги:

v-on ​

Прикріплює слухача подій до елементу.

  • Скорочений запис: @

  • Очікує: Function | Inline Statement | Object (without argument)

  • Аргумент: event (optional if using Object syntax)

  • Модифікатори:

    • .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>

<!-- inline оператор -->
<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>

<!-- модифікатор prevent default за промовчанням без виразу -->
<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" />

<!-- inline оператор -->
<MyComponent @my-event="handleThis(123, $event)" />

  • Також до вашої уваги:

v-bind ​

Динамічне прив'язування одного або кількох атрибутів або реквізиту компонента до виразу.

  • Скорочений запис: : or . (when using .prop modifier)

  • Очікує: 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" має бути оголошено в дочірньому компоненті. -->
<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 у camelCase при використанні DOM-шаблонів, наприклад для атрибута viewBox SVG:

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

    .camel не потрібен, якщо ви використовуєте рядкові шаблони або попередню компіляцію шаблону на етапі збірки.

  • Також до вашої уваги:

v-model ​

Створення двостороннього прив'язування елемента введення даних форми або компонента.

v-slot ​

Позначення іменованого слота або слота, який одержує вхідні реквізити.

  • скорочений запис: #

  • Очікує: JavaScript вираз, допустимий у позиції аргументу функції, включаючи підтримку деструктуризації. Опціонально - потрібен лише якщо очікується передача атрибутів до слота.

  • Аргумент: назва слота (опціонально, за промовчанням default)

  • Використовується тільки з:

    • <template>
    • компонентами (для єдиного слота за промовчанням із реквізитами)

  • Приклад:

    template
    <!-- Named slots -->
<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 }">
  Mouse position: {{ 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 ​

  • Очікує: any[]

  • Подробиці

    Мемоізація частини піддерева шаблону. Може використовуватися як для елементів, так і компонентів. Директива очікує масив фіксованої довжини залежних значень, які використовуватимуться для порівняння при мемоізації. Якщо кожне значення масиву залишилося таким самим, як при останньому рендерингу, то оновлення всього піддерева буде пропущено. Наприклад:

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

    Під час повторного рендерингу компонента, якщо і valueA, і valueB залишаються незмінними, усі оновлення для цього <div> та його дочірніх елементів буде пропущено. Насправді навіть створення Virtual DOM VNode також буде пропущено, оскільки мемоізовану копію піддерева можна використовувати повторно.

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

    Використання з 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 }} - обраний: {{ item.id === selected }}</p>
  <p>...більше дочірніх елементів</p>
</div>

    При зміні стану selected в компоненті буде створюватися велике число VNode, навіть якщо більшість елементів залишаються такими ж. Використання v-memo тут уточнює, що «оновлюємо цей елемент лише в тому випадку, якщо він перейшов зі стану, не вибраний у стан вибраний». Це дозволить усім незайманим елементам пере використовувати свою попередню VNode і повністю пропустити операцію порівняння. Зверніть увагу, що item.id не потрібно додавати масив залежностей мемоізації, оскільки Vue автоматично визначає його з :key елемента.

    попередження

    Використовуючи v-memo з v-for, переконайтеся, що вони використовуються в одному елементі. v-memo не працює всередині v-for.

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

  • Також до вашої уваги:

v-cloak ​

Використовується для приховування не компільованого шаблону, доки він не буде готовий.

  • Не чекає виразу

  • Подробиці

    Ця директива необхідна лише в налаштуваннях без етапу збірки.

    Під час використання шаблонів у DOM може спостерігатися "спалах не скомпільованих шаблонів": користувач може бачити необроблені теги вусів, доки змонтований компонент не замінить їх відрендериним вмістом.

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

  • Приклад:

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

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

Редагувати цю сторінку на GitHub