Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Для чого використовується v-cloak?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)`v-cloak` - це допоміжна директива Vue, яка використовується для **приховування шаблону до того моменту, поки застосунок Vue не буде ініціалізовано**. `v-cloak` допомагає уникнути мерехтіння необробленого шаблону (`{{ }}`) до завантаження Vue. **Ключове:** `v-cloak` не керує реактивністю і не впливає на роботу застосунку - це лише візуальний фільтр, що приховує необроблений шаблон.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`v-cloak` - це допоміжна директива Vue, яка використовується для **приховування шаблону до того моменту, поки застосунок Vue не буде ініціалізовано**. Простіше кажучи: > `v-cloak` **допомагає уникнути мерехтіння необробленого шаблону (**`{{ }}`**) до завантаження Vue.** --- ## Навіщо це потрібно? Коли застосунок завантажується, буває момент, коли HTML вже відобразився, але Vue **ще не встиг** скомпілювати шаблони. Наприклад, користувач може побачити: ``` {{ message }} ``` замість вже обчисленого тексту. Це виглядає неприємно (так званий **template flicker**). `v-cloak` дозволяє приховати такі елементи до завершення ініціалізації Vue. --- ## Як використовується #### 1. Додаєш директиву в HTML: ```html <div id="app" v-cloak> {{ message }} </div> ``` #### 2. І стилі: ```html <style> [v-cloak] { display: none; } </style> ``` #### 3. Коли Vue змонтується - атрибут автоматично видалиться Vue сам видаляє `v-cloak`, і елемент знову відображається вже з коректними даними. --- ## Приклад До ініціалізації Vue: ``` <div v-cloak>{{ counter }}</div> ``` Користувач побачив би: ``` {{ counter }} ``` Але завдяки `v-cloak` - елемент прихований. Після ініціалізації Vue: - `v-cloak` зникає - DOM показує коректне значення, наприклад: `42` --- ## Важливе - `v-cloak` **не керує реактивністю** і **не впливає на роботу застосунку**. - Це **лише візуальний фільтр**, що приховує необроблений шаблон. - Використовується найчастіше в **SSR, SPA з повільним завантаженням, старих браузерах**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.