Vue uses native js to implement automatic generation of custom components, vuejs

Vue uses native js to implement automatic generation of custom components, vuejs

For the current three mainstream front-end data driver frameworks (vue, ng, react), all have APIs for creating custom components, but they must first write the mount point in advance, this mount point can be the original static element label or custom template. for multiple components generated through the same data stream, if you write a mount point on the page in advance ), then, you can use the dom operation to dynamically Add a message similar to the following: Failed to execute 'appendchild 'on 'node': parameter 1 is not of type 'node '. (...). Why? What should we do next?

The reason is that any dom operation object must be a W3C-compliant element, unless as described below, rewrite and generate the html Element Object prototype (HTMLElement. prototype) and register custom elements to dynamically generate custom components.

However, we all know that the original intention of using the data-driven framework is to avoid dom operations as much as possible. The following Code still contains some dom operations. For the current level of cognition, it seems that these necessary dom operations cannot be avoided. For more information, see the code...

<! DOCTYPE html> 
To maintain the maintainability and ease of coding, I put the template part in a separate fuhao-components.js file, as shown below:
Var textTpl = ''; <div class =" mui-content-padded "> <input: type =" type ": name =" key ": placeholder = "keyname"> </div> var textareaTpl = ''; <div class =" mui-content-padded "> <textarea rows =" 5 ": placeholder = "keyname"> </textarea> </div> var radioTpl = ''; <form class = "mui-input-group mui-content-padded"> <div class = "mui-input-row mui-radio mui-left" v-for = "value in values "> <label >{{ value. key }}</label> <input: name = "key": type = "type ": value = "key"> </div> </form> var checkboxTpl = ''; <form class = "mui-input-group mui-content-padded"> <div class = "mui-input-row mui-checkbox mui-left" v-for = "value in values "> <label >{{ value. key }}</label> <input: name = "key": type = "type ": value = "key"> </div> </form> var selectTpl = ''; <div class = "mui-content-padded"> 

The final rendering effect is as follows:

In view of the fact that vue dynamically generates custom components using dom operations, the console will report certain errors. This bug is still being fixed, it may be necessary to have a deeper understanding of vue Data Binding and transmission mechanisms and js Dynamic Registration of custom components...

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.