Допустим, нам нужно разобраться с существующей разметкой HTML, исходящей от CMS, где мы не можем влиять на разметку, используя директивы и привязки и т. Д. Теперь мы пытаемся сделать компонент Vue.js из списка изображений, таких какв качестве слайдера.
<div id="slider">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
</div>
В vanilla JS или jQuery я бы выбрал этот элемент по его идентификатору и провел там необходимые манипуляции с DOM, чтобы запустить слайдер.
В Vue I 'я хотел бы использовать эту разметку / данные для моего пользовательского компонента, такого как:
<Slider>
<img v-for="image in images" v-bind:src="image" :class="myClass" @click="doMagic" />
</Slider>
В идеальном мире я хотел бы написать разметку и данные ползунка непосредственно в моем компоненте или получить данные слайдов из API и процессаэто тогда.Но, скажем, нам нужно разобраться с простой HTML-разметкой ползунка здесь.
Есть ли разумный способ использовать существующую разметку ползунка в Vue.js?
Как насчет подхода к использованиюvanilla JS document.querySelector на изображениях, передать его нашему компоненту и, наконец, смонтировать его на элемент DOM ползунка (затем более или менее заменив его)?