{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Чтобы получить доступ к DOM через "},{"type":"text","marks":[{"type":"code"}],"text":"ref"},{"type":"text","text":" во Vue, используется "},{"type":"text","marks":[{"type":"bold"}],"text":"template ref"},{"type":"text","text":" — это "},{"type":"text","marks":[{"type":"code"}],"text":"ref"},{"type":"text","text":", который привязывается к реальному DOM-элементу."},{"type":"hardBreak"},{"type":"text","text":"Доступ к DOM появляется "},{"type":"text","marks":[{"type":"bold"}],"text":"только после монтирования компонента"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"✅ 1. Использование ref в Composition API"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Шаг 1: создать ref-переменную"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"const inputEl = ref(null)\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Шаг 2: привязать её в шаблоне"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Шаг 3: получить доступ в onMounted"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"onMounted(() => {\n inputEl.value.focus() // inputEl.value — это реальный DOM элемент\n})\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧪 Полный пример"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 Что можно делать с DOM-элементом?"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"inputEl.value.focus()\ninputEl.value.blur()\ninputEl.value.style.color = 'red'\ninputEl.value.classList.add('active')\ninputEl.value.getBoundingClientRect()\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Любые методы обычных DOM-элементов доступны."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"⚠️ Важные правила"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ 1. ref доступен "},{"type":"text","marks":[{"type":"bold"}],"text":"только после onMounted"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"До монтирования:"}]},{"type":"codeBlock","attrs":{"language":"js"},"content":[{"type":"text","text":"console.log(inputEl.value) // null\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ 2. ref возвращает сам DOM-элемент"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"А не реактивный объект — это прямой reference на элемент."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ 3. Если элемент скрыт через v-if"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"ref будет "},{"type":"text","marks":[{"type":"code"}],"text":"null"},{"type":"text","text":", пока элемент не появится."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✔️ 4. При v-for ref → массив ref-ов"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Например:"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"

...

\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🚀 Пример с кнопкой \"Скролл к элементу\""}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Как получить доступ к DOM через ref?

Комментарии