problem description
I want to create a site builder using Vue. Think of things like Wix,Squarespace and Webflow, where users can delete elements (Div blocks, containers, parts, etc.) and style them on the page. An important requirement: page layouts can be 100% dynamic, so it"s not just a fixed number of predefined layouts.
so basically the purpose of the application is to let the user manipulate DOM. This is where I"m a little confused, because the Vue paradigm obviously makes DOM data-driven.
I use Jquery UI to drag and drop libraries that assume you immediately manipulate DOM from Jquery (On drop-> Append html). So I"m looking for some guidance on how to adapt this library to the Vue way DOM operates.
the environmental background of the problems and what methods you have tried
whenever I use Jquery mode, the Vue instance does not recognize the element, so it is almost impossible to do anything else with it. How do I make sure that the elements I put into the page are registered with a specific Vue component? I think I need to initialize the Vue component dynamically in some way. So basically every html element becomes its own component. Is Vue designed for pages where each element is a (simple) Vue component? How will this affect the performance of hundreds of elements on the page?
I also need a way for people to move elements to different parent components when changing the location of the DOM. I think I need to unregister and re-register another parent component. Is this feasible and fast enough to maintain a smooth UI?
I need a way to dynamically assign styles to specific elements. I think I"ll use v-bind:style to dynamically assign a class from the data model. Is this correct and can I safely do this for each element on the page?
related codes
/ / Please paste the code text below (do not replace the code with pictures)
what result do you expect? What is the error message actually seen?
I"m curious if such a challenge can be achieved using Vue. It would be great if you could share your thoughts and point me in the right direction!
Thank you very much!