Фото Івони Лах на Unsplash
Потрібні попередні умови
- Переконайтесь, що у вас встановлена версія Node.js 18.3+
- Вам потрібно створити додаток на Vue, слідуючи цьому посібнику.
Вступ
Ми використовуємо Vue для спрощення маніпуляцій з DOM. Однак інколи потрібно вручну доступати до DOM та виконувати маніпуляції. Ось тут і вступають у гру Template References (Посилання на шаблони).
У шаблоні
Напишемо простий елемент <h1> як показано нижче:
У рядку 2 зверніть увагу, що ми використали ref="header", що є декларацією посилання з ім'ям header.
У скрипті
У рядку 8 оголошуємо стан з іменем header, оскільки ми використали ref="header" (ім'я змінної повинно відповідати імені посилання). Щоб маніпулювати елементом h1, нам потрібно звернутися до нього у хук onMounted (тому що він забезпечує повне завантаження DOM). Потім просто встановимо innerText, щоб відобразити "Hello World" у браузері.
Запуск проєкту
Тепер ви бачите текст "Hello World", але цього разу ми використали посилання на шаблон, щоб відобразити цей текст.
Завершено
Ось як використовуються Template Ref. Просто пам'ятайте, що ім'я стану повинно збігатися з ім'ям посилання, оголошеним у шаблоні.
Попереднє: Життєвий цикл компонента
Наступне: Watch and WatchEffect
Перекладено з: Template Refs