Вбудовані директиви
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
Створення двостороннього прив'язування елемента введення даних форми або компонента.
Очікує: змінюється залежно від значення вхідного елемента форми або виходу компонентів
Використовується тільки з:
<input>
<select>
<textarea>
- components
Модифікатори:
Також до вашої уваги:
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>
не буде видно до завершення компіляції.