Method, system and equipment for dynamically creating vue component through text and medium

Abstract

The invention discloses a method, a system, equipment and a medium for dynamically creating a vue component through a text, an empty vue component is created as a parent component, and a div element in the parent component is used as a mounting container of a dynamic component; two props are added in the parent component and are used for receiving a local text or acquiring a remote text; the method comprises the following steps of: splitting the content of a text into three parts, namely template, script and css, and performing corresponding processing; the script is converted into a constructor function of a vue component through an extension method of the vue, and a vue instance is created through the constructor function; bridging attributes and events of the parent component into a vue instance, and mounting the vue instance into a div element; and the css is mounted in the div element, and creation of the vue component is completed. According to the method and the device, the vue component can be dynamically generated and modified according to the structure and logic of the vue component described in the text file under the condition that the application program is not repackaged, so that the development efficiency and the user experience are improved.

Description

Technical Field

[0001] The present invention belongs to the technical field of Vue application development, and specifically relates to a method, system, device and medium for dynamically creating a Vue component through text. Background Art

[0002] In modern web development, Vue is a popular front-end framework that allows developers to build complex user interfaces in a componentized way. However, traditional Vue components need to be defined during the development phase and are difficult to modify or replace after the application is released. This not only limits the flexibility and maintainability of Vue components, but also, as the amount of project code increases, the packaging process consumes a lot of time and resources. Whenever a Vue component needs to be modified, it needs to be packaged multiple times, resulting in a waste of time and resources. Summary of the invention

[0003] The purpose of the present invention is to provide a method, system, device and medium for dynamically creating a Vue component through text, so as to overcome the problem in the prior art that whenever a Vue component needs to be modified, it needs to be packaged multiple times, resulting in a waste of time and resources.

[0004] In order to achieve the above object, the present invention adopts the following technical scheme: A method for dynamically creating a Vue component through text, comprising the following steps: Create an empty vue component as a parent component and create a div element in the parent component; Add two properties in the parent component to receive local text and get remote text respectively to obtain text; The obtained text is divided into three parts: template, script, and css. Template is the UI interface of the vue component, script is the specific internal logic of the vue component, and css is the UI interface style of the vue component. Add a prefix to the class in CSS. The prefix consists of a unique string. Convert the script to a javascript object, add a template attribute to the javascript object, and pass the content of the template to the template attribute added to the javascript object; Convert a JavaScript object into a Vue component constructor; Create a child component through the constructor of the vue component and pass all properties in the parent component to the child component; Traverse all functions in the method attribute of the javascript object and hijack all functions into the child components; Bridge the events between parent and child components; Mount the child component to the div element of the parent component through the $mount method in the child component; Mount the CSS to the div element of the parent component to complete the creation of the Vue component.

[0005] Furthermore, two properties are added to the parent component for receiving local text and obtaining remote text respectively, specifically: Add two properties to the parent component, code and codeUrl, where code is the local text content and codeUrl is the address of the text on the remote server. When codeUrl is valid, the text is obtained from the remote server first. When the text fails to be obtained from the remote server, the text content in code is used; when codeUrl is invalid, the text content in code is used directly.

[0006] Furthermore, the obtained text is split into three parts: template, script, and css, specifically: The obtained text is parsed through regular expressions to obtain three text blocks, namely template, script and css.

[0007] Further, the unique string is created using a GUID.

[0008] Furthermore, the converting of the javascript object into the constructor of the vue component is specifically: converting the javascript object into the constructor of the vue component through the extend method provided by the vue component.

[0009] Furthermore, hijacking all functions into subcomponents is specifically: using a bind method to hijack all functions into subcomponents.

[0010] Furthermore, the event of bridging the parent component and the child component is specifically: Traverse the private attribute _events in the parent component, which stores all the event names in the parent component, create events in the child component with the same name, and then listen to the events in the child component in the parent component. When the child component triggers the event, the parent component triggers the parent component's event with the same parameters.

[0011] A system for dynamically creating Vue components through text, including: Parent component creation module: used to create an empty vue component as a parent component and create a div element in the parent component; Attribute adding module: used to add two attributes in the parent component for receiving local text and obtaining remote text respectively; Splitting module: used to split the obtained text into three parts: template, script, and css. Template is the UI interface of the vue component, script is the specific internal logic of the vue component, and css is the UI interface style of the vue component. Prefix module: used to add a prefix to the class in CSS. The prefix consists of a unique string. The first conversion module is used to convert the script into a javascript object, add a template attribute in the javascript object, and pass the content of the template to the template attribute added in the javascript object; The second conversion module: used to convert the JavaScript object into the constructor of the Vue component; Create module: used to create a child component through the constructor of the vue component and pass all properties in the parent component to the child component; Traversal module: used to traverse all functions in the method attribute of the JavaScript object and hijack all functions into subcomponents; Bridge module: used to bridge events between parent components and child components; The first mounting module: used to mount the subcomponent to the div element of the parent component through the $mount method in the subcomponent; The second mounting module: used to mount CSS to the div element of the parent component to complete the creation of the Vue component.

[0012] Furthermore, two properties are added to the parent component for receiving local text and obtaining remote text respectively, specifically: Add two properties to the parent component, code and codeUrl, where code is the local text content and codeUrl is the address of the text on the remote server. When codeUrl is valid, the text is obtained from the remote server first. When the text fails to be obtained from the remote server, the text content in code is used; when codeUrl is invalid, the text content in code is used directly.

[0013] Furthermore, the obtained text is split into three parts: template, script, and css, specifically: The obtained text is parsed through regular expressions to obtain three text blocks, namely template, script and css.

[0014] Further, the unique string is created using a GUID.

[0015] Furthermore, the converting of the javascript object into the constructor of the vue component is specifically: converting the javascript object into the constructor of the vue component through the extend method provided by the vue component.

[0016] Furthermore, hijacking all functions into subcomponents is specifically: using a bind method to hijack all functions into subcomponents.

[0017] Furthermore, the event of bridging the parent component and the child component is specifically: Traverse the private attribute _events in the parent component, which stores all the event names in the parent component, create events in the child component with the same name, and then listen to the events in the child component in the parent component. When the child component triggers the event, the parent component triggers the parent component's event with the same parameters.

[0018] A computer device comprises a memory, a processor and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the steps of the method for dynamically creating a Vue component through text are implemented.

[0019] A computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of a method for dynamically creating a Vue component through text are implemented.

[0020] Compared with the prior art, the present invention has the following beneficial technical effects: Through the method of the present invention, developers can update or replace the vue components in the application in real time after the application is released, and only need to modify or upload the corresponding text file. In this way, not only can the dynamic and personalized vue components be realized, but also different needs and scenarios can be met. Moreover, the time and resource consumption of repackaging can be reduced, and the efficiency of packaging and deployment can be improved. Most importantly, based on the present invention, a remote vue component store can be created to uniformly maintain and manage vue components, thereby improving development efficiency and the maintainability of the project.

[0021] The present invention can parse a text file stored locally or on a remote server, and dynamically generate a Vue component based on the parsing result. The text file can be in any format as long as it can describe the structure and logic of the Vue component. The Vue component can be of any type, such as a button, a form, a chart, etc. The present invention can modify the Vue component in the application after the application is released, thereby avoiding the waste of time and resources caused by multiple packaging. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] The drawings in the specification are used to provide further understanding of the present invention and constitute a part of the present invention. The schematic embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute improper limitations on the present invention.

[0023] Figure 1 This is a flow chart of a method for dynamically creating a Vue component through text according to an embodiment of the present invention; Figure 2 It describes the structure of the vue component; Figure 3 It is a vue component dynamically created by text; Figure 4 A schematic diagram of the system structure of dynamically creating a Vue component through text according to an embodiment of the present invention; Figure 5 The figure is a schematic diagram of the structure of an electronic device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0024] In order to enable those skilled in the art to better understand the scheme of the present invention, the technical scheme in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present invention.

[0025] It should be noted that the terms "first", "second", etc. in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0026] Embodiment 1 like Figure 1 As shown, the present invention discloses a method for dynamically creating a Vue component through text, comprising the following steps: Create an empty vue component as a parent component and create a div element in the parent component; Add two properties in the parent component to receive local text and get remote text respectively to obtain text; The obtained text is divided into three parts: template, script, and css. Template is the UI interface of the vue component, script is the specific internal logic of the vue component, and css is the UI interface style of the vue component. Add a prefix to the class in CSS. The prefix consists of a unique string. Convert the script to a javascript object, add a template attribute to the javascript object, and pass the content of the template to the template attribute added to the javascript object; Convert a JavaScript object into a Vue component constructor; Create a child component through the constructor of the vue component and pass all properties in the parent component to the child component; Traverse all functions in the method attribute of the javascript object and hijack all functions into the child components; Bridge the events between parent and child components; Mount the child component to the div element of the parent component through the $mount method in the child component; Mount the CSS to the div element of the parent component to complete the creation of the Vue component.

[0027] Embodiment 2 The present invention parses the three parts of text content, namely, template, script and CSS, in a text file, creates template and script as a constructor of a Vue component through the extend method of the Vue component, creates a subcomponent through the constructor of the Vue component, and finally mounts the subcomponent and CSS to the div element of the parent component, thereby dynamically creating a Vue component.

[0028] In summary, the method of the present invention specifically comprises the following steps: Step 1: Create an empty vue component and create a div element in the empty vue component. The empty vue component, as a parent component, is not only a container for dynamic components dynamically created through text, but also provides external attributes and event interfaces, which can pass external attributes and events to dynamic components.

[0029] Step 2: Add two properties to the parent component created in step 1, namely code and codeUrl. Code is the local text content, and codeUrl is the address of the text on the remote server. When codeUrl is valid, the text is obtained from the remote server first. When the text fails to be obtained from the remote server, the text content in code is used; when codeUrl is invalid, the text content in code is used directly.

[0030] Step 3: The text obtained in step 2 is parsed using regular expressions to obtain three text blocks: template, script, and css. Figure 2 The functions of each text block are shown in the following table:

[0031] Step 4: Use GUID to create a unique string, for example: .v1-render-eeefeec7-a722-6bd3-27db-83bbbf8986c4, and then add the string to the front of each class in CSS. For example, there is a class named .text in the text, and after modification, it becomes: .v1-render-eeefeec7-a722-6bd3-27db-83bbbf8986c4 .text. After this processing, the style of the dynamic component can be isolated.

[0032] Step 5: Use new Function(script)() to convert the script text block into a JavaScript object and add a template property, then pass the content of the template text block to this template property.

[0033] Step 6: Convert a JavaScript object into a Vue component constructor via vue.extend(obj).

[0034] Step 7: Create a child component through the constructor of the vue component. At the same time, pass all the properties of the parent component to the child component. At this time, this child component is only a basic vue component containing the UI interface and properties, and does not contain any internal logic.

[0035] Step 8: Traverse the methods property defined in the javascript object, which contains all the internal processing logic in the child component. In the child component, create an empty function with the same name as the function in the methods in the javascript object, copy the function in the methods to the empty function, and finally use the bind method to change the this pointer of these functions to the child component.

[0036] Step 9: Bridge the events of the parent component and the child component. Traverse the private attribute _events in the parent component, which stores all the event names in the parent component, and use the same name to create events in the child component. Then listen to the events in the child component in the parent component. When the child component triggers the event, the parent component will trigger the parent component event with the same parameters. In this way, the events of the child component can be exposed to the outside for use by the caller.

[0037] Step 10: The UI interface is mounted to the div element of the parent component through the $mount method in the child component.

[0038] Step 11: Mount the CSS to the div element of the parent component to complete the creation of the Vue component, such as Figure 3 shown.

[0039] Embodiment 2 like Figure 4 As shown, the present invention provides a system for dynamically creating a Vue component through text, including: Parent component creation module: used to create an empty vue component as a parent component and create a div element in the parent component; Attribute adding module: used to add two attributes in the parent component for receiving local text and obtaining remote text, namely code and codeUrl, where code is the local text content and codeUrl is the address of the text on the remote server. When codeUrl is valid, the text is obtained from the remote server first. When the text fails to be obtained from the remote server, the text content in code is used; when codeUrl is invalid, the text content in code is used directly; Splitting module: used to parse the obtained text into three parts: template, script, and css through regular expressions. Template is the UI interface of the vue component, script is the specific internal logic of the vue component, and css is the UI interface style of the vue component. Prefix module: used to add a prefix to the class in CSS. The prefix consists of a unique string created using GUID. The first conversion module is used to convert the script into a javascript object, add a template attribute in the javascript object, and pass the content of the template to the template attribute added in the javascript object; The second conversion module: used to convert the JavaScript object into the constructor of the Vue component through the extend method provided by the Vue component; Create module: used to create a child component through the constructor of the vue component and pass all properties in the parent component to the child component; Traversal module: used to traverse all functions in the method attribute of the JavaScript object, and use the bind method to hijack all functions into the subcomponent; Bridge module: used to bridge the events of parent components and child components. Specifically, it traverses the private attribute _events in the parent component, which stores all the event names in the parent component, creates events in the child component with the same name, and then listens to the events in the child component in the parent component. When the child component triggers the event, the parent component triggers the event of the parent component with the same parameters; The first mounting module: used to mount the subcomponent to the div element of the parent component through the $mount method in the subcomponent; The second mounting module: used to mount CSS to the div element of the parent component to complete the creation of the Vue component.

[0040] Embodiment 3 A computer device such as Figure 5 As shown, it includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the steps of the method for dynamically creating a Vue component through text are implemented.

[0041] Embodiment 4 A computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of a method for dynamically creating a Vue component through text are implemented.

[0042] It will be appreciated by those skilled in the art that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Furthermore, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0043] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0044] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0045] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0046] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention rather than to limit its protection scope. Although the present invention has been described in detail with reference to the above embodiments, ordinary technicians in the field should understand that after reading the present invention, those skilled in the art can still make various changes, modifications or equivalent substitutions to the specific implementation methods of the invention, but these changes, modifications or equivalent substitutions are all within the protection scope of the pending claims of the invention.

Claims

1. A method for dynamically creating a Vue component through text, characterized in that: The following steps are involved: Create an empty vue component as a parent component and create a div element in the parent component; Add two properties in the parent component to receive local text and get remote text respectively to obtain text; The obtained text is divided into three parts: template, script, and css. Template is the UI interface of the vue component, script is the specific internal logic of the vue component, and css is the UI interface style of the vue component. Add a prefix to the class in CSS. The prefix consists of a unique string. Convert the script to a javascript object, add a template attribute to the javascript object, and pass the content of the template to the template attribute added to the javascript object; Convert a JavaScript object into a Vue component constructor; Create a child component through the constructor of the vue component and pass all properties in the parent component to the child component; Traverse all functions in the method attribute of the javascript object and hijack all functions into the child components; Bridge the events between parent and child components; Mount the child component to the div element of the parent component through the $mount method in the child component; Mount the CSS to the div element of the parent component to complete the creation of the Vue component.

2. A method for dynamically creating a Vue component through text according to claim 1, characterized in that: The parent component adds two properties for receiving local text and obtaining remote text, respectively, as follows: Add two properties to the parent component, code and codeUrl, where code is the local text content and codeUrl is the address of the text on the remote server. When codeUrl is valid, the text is obtained from the remote server first. When the text fails to be obtained from the remote server, the text content in code is used; when codeUrl is invalid, the text content in code is used directly.

3. A method for dynamically creating a Vue component through text according to claim 1, characterized in that: The obtained text is divided into three parts: template, script, and css, specifically: The obtained text is parsed through regular expressions to obtain three text blocks, namely template, script and css.

4. A method for dynamically creating a Vue component through text according to claim 1, characterized in that: Said unique string is created using a guid.

5. A method for dynamically creating a Vue component through text according to claim 1, characterized in that: The converting of the javascript object into the constructor of the vue component is specifically: converting the javascript object into the constructor of the vue component through the extend method provided by the vue component.

6. A method for dynamically creating a Vue component through text according to claim 1, characterized in that: The hijacking of all functions into subcomponents is specifically as follows: all functions are hijacked into subcomponents using the bind method.

7. A method for dynamically creating a Vue component through text according to claim 1, characterized in that: The events that bridge the parent component and the child component are specifically: Traverse the private attribute _events in the parent component, which stores all the event names in the parent component, create events in the child component with the same name, and then listen to the events in the child component in the parent component. When the child component triggers the event, the parent component triggers the parent component's event with the same parameters.

8. A system for dynamically creating Vue components through text, characterized in that: include: Parent component creation module: used to create an empty vue component as a parent component and create a div element in the parent component; Attribute adding module: used to add two attributes in the parent component for receiving local text and obtaining remote text respectively; Splitting module: used to split the obtained text into three parts: template, script, and css. Template is the UI interface of the vue component, script is the specific internal logic of the vue component, and css is the UI interface style of the vue component. Prefix module: used to add a prefix to the class in CSS. The prefix consists of a unique string. The first conversion module is used to convert the script into a javascript object, add a template attribute in the javascript object, and pass the content of the template to the template attribute added in the javascript object; The second conversion module: used to convert the JavaScript object into the constructor of the Vue component; Create module: used to create a child component through the constructor of the vue component and pass all properties in the parent component to the child component; Traversal module: used to traverse all functions in the method attribute of the JavaScript object and hijack all functions into subcomponents; Bridge module: used to bridge events between parent components and child components; The first mounting module: used to mount the subcomponent to the div element of the parent component through the $mount method in the subcomponent; The second mounting module: used to mount CSS to the div element of the parent component to complete the creation of the Vue component.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the steps of a method for dynamically creating a Vue component through text as described in any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps of a method for dynamically creating a Vue component through text as described in any one of claims 1 to 7 are implemented.

Images