Development method and system of VUE custom instruction

Abstract

The invention discloses a VUE custom instruction development method and system, and relates to the computer technology, and the method comprises the steps: determining the demand content; configuring basic information of an instruction interface according to the demand content, and defining the name of the instruction as loading so as to form a loading instruction; the loading instruction is registered in a Vue. Direct () method, and a necessary hook function is written for the loading instruction, so that a VUE custom instruction is formed; and the VUE self-defined instruction is applied. According to the method provided by the embodiment of the invention, the development efficiency of the Vue can be obviously improved through instruction design and application strategies.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method and system for developing VUE custom instructions. Background Art

[0002] As a particularly popular front-end MVVM framework, Vue.js simplifies DOM operations and interactions between components through its built-in instruction system (v-bind). However, in actual development, developers often need to implement some functions that Vue.js does not directly provide or optimize specific DOM behaviors. In the prior art, although Vue.js allows developers to register custom instructions, there is no systematic methodology on how to efficiently develop and apply these custom instructions to solve practical problems. Summary of the invention

[0003] The embodiments of the present application provide a method and system for developing a VUE custom instruction, which can significantly improve the development efficiency of Vue through instruction design and application strategy.

[0004] The present application embodiment provides a method for developing a VUE custom instruction, including:

[0005] Determine the content of the requirements;

[0006] Configure the basic information of the command interface according to the required content, and define the command name as loading to form a loading command;

[0007] Register the loading directive in the Vue.directive() method, and write necessary hook functions for the loading directive to form a VUE custom directive;

[0008] Apply the VUE custom instruction.

[0009] Optionally, determine the requirements including:

[0010] In the process of front-end and back-end interaction through ajax, after waiting for the ajax request to complete, different content is displayed according to the returned data results, and the loading status requirements are determined.

[0011] Optionally, the basic information of the command interface is configured according to the required content, including: the name, parameters, modifiers of the command interface, and,

[0012] Parameters are reserved for the loading instruction, wherein the reserved parameters include one or more of the following: text content, font color, icon color, and size.

[0013] Optionally, register the loading directive in the Vue.directive() method, and write necessary hook functions for the loading directive to form a VUE custom directive including:

[0014] Create a DOM element through the js method to serve as a container for the loading instruction;

[0015] Use the getAttribute method to obtain all attributes on the DOM element bound to the instruction, set the corresponding animation, prompt text and anti-shake time for the loading instruction through the obtained attributes, and register the loading instruction and add it to the DOM element;

[0016] Generate the core internal structure of the loading instruction through js, use the svg vector icon as the icon of the loading instruction, create text to display the DOM element, and set the required style for the loading instruction by adding class names or creating a style level style sheet.

[0017] Optionally, registering the loading directive in the Vue.directive() method and writing necessary hook functions for the loading directive to form a VUE custom directive also includes:

[0018] Generate the corresponding tags through the js method document.createElement('style') of the custom hierarchical style sheet, put the written style sheet into it, and add the style sheet to the head element to achieve the style effect of the custom instructions in all positions of the corresponding project;

[0019] Custom loading is bound to DOM elements through v-loading. The created DOM element containing the loading core module is inserted into the element with the custom instruction added to achieve dynamic loading effect on the element bound to the custom loading.

[0020] Optionally, registering the loading directive in the Vue.directive() method and writing necessary hook functions for the loading directive to form a VUE custom directive also includes:

[0021] Based on VUE's responsive mechanism, when the attribute value changes, the hook function update of the custom instruction is triggered:

[0022] When true, the loading core module is inserted into the created DOM element to display loading;

[0023] If false, the loading core module will be unloaded from the created DOM element.

[0024] Optionally, creating a DOM element by a js method as a container of the loading instruction also includes:

[0025] Add a class name to the DOM element, and add the class name of the required animation to the created DOM element to achieve the animation effect of the loading instruction.

[0026] Optionally, applying the VUE custom instruction includes:

[0027] Develop the formed VUE custom instructions as separate modules to achieve reuse; or,

[0028] Utilize Vue's responsive data binding mechanism to dynamically change the parameter values ​​of the VUE custom instructions to adapt to different scenarios.

[0029] The embodiment of the present application also provides a VUE custom instruction development system, which is characterized by comprising a processor and a memory, wherein a computer program is stored in the memory, and when the computer program is executed by the processor, the steps of the VUE custom instruction development method as described above are implemented.

[0030] The method of the embodiment of the present application can significantly improve the development efficiency of Vue through instruction design and application strategy.

[0031] The above description is only an overview of the technical solution of the present application. In order to more clearly understand the technical means of the present application, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the present application more obvious and easy to understand, the specific implementation methods of the present application are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the detailed description of the preferred embodiments below. The accompanying drawings are only for the purpose of illustrating the preferred embodiments and are not to be considered as limiting the present application. Also, the same reference symbols are used throughout the accompanying drawings to represent the same components. In the accompanying drawings:

[0033] Figure 1 The following is a schematic diagram of the basic process of the method for developing VUE custom instructions according to an embodiment of the present application. DETAILED DESCRIPTION

[0034] The exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided to enable a more thorough understanding of the present disclosure and to fully convey the scope of the present disclosure to those skilled in the art.

[0035] The present application embodiment provides a method for developing a VUE custom instruction, such as Figure 1 As shown, the following steps are included:

[0036] In step S101, the required content is determined. In the development process of the front-end project, there is a scenario where the front-end and back-end interact through ajax, and it is necessary to wait for the ajax request to complete and then display different content according to the returned data results. In some embodiments, determining the required content includes:

[0037] In the process of front-end and back-end interaction through ajax, after waiting for the ajax request to complete, different content is displayed according to the returned data results, and the loading status requirements are determined. This scenario will be encountered in many scenarios. At present, the domestic vue framework is one of the mainstream frameworks. Therefore, it is necessary to develop custom loading instructions based on vue in the embodiment of the present application.

[0038] In step S102, basic information of the instruction interface is configured according to the required content, and the name of the instruction is defined as loading to form a loading instruction. In some embodiments, configuring the basic information of the instruction interface according to the required content includes: configuring the interface information such as the name, parameters, and modifiers of the instruction interface, defining the name of the instruction as loading, and reserving parameters for the loading instruction, wherein the reserved parameters include but are not limited to one or more of the following: text content, font color, icon color, and size.

[0039] In step S103, the loading instruction is registered in the Vue.directive() method, and necessary hook functions (beforeMount, update, unmounted, etc.) are written for the loading instruction to implement the functions designed by the instruction, and log output is added to each hook function to help developers track the execution process of the instruction to form a VUE custom instruction.

[0040] In step S104, the VUE custom instruction is applied.

[0041] In some embodiments, registering the loading instruction in the Vue.directive() method and writing necessary hook functions for the loading instruction to form a VUE custom instruction includes:

[0042] The basic functions of the loading module are implemented in the beforeMount hook function, and a DOM element is created by a js method as a container for the loading instruction. In a specific example, creating a DOM element by a js method as a container for the loading instruction also includes:

[0043] Add a class name id to the DOM element, and add the class name or class name id of the required animation to the created DOM element to set the required style. You can then introduce the third-party animation library Animate.css, and add the class name of the required animation to the created DOM element to achieve the animation effect of the loading module.

[0044] You can also add log printing to each hook function in the custom instruction to assist developers in troubleshooting errors during the development process.

[0045] Use the getAttribute method to obtain all attributes on the DOM element bound to the instruction, set the corresponding animation, prompt text and anti-shake time for the loading instruction through the obtained attributes, and register the loading instruction and add it to the DOM element.

[0046] Generate the core internal structure of the loading instruction through js, use the svg vector icon as the icon of the loading instruction, create text to display the DOM element, and set the required style for the loading instruction by adding class names or creating a style-level style sheet. You can use Animate.css in the style sheet to implement the animation effect of the loading module, or you can use the native CSS attribute animation to customize the animation effect.

[0047] In some embodiments, registering the loading instruction in the Vue.directive() method and writing necessary hook functions for the loading instruction to form a VUE custom instruction also includes:

[0048] Generate the corresponding tags through the js method document.createElement('style') of the custom hierarchical style sheet, put the written style sheet into it, and add the style sheet to the head element to achieve the style effect of the custom instructions in all positions of the corresponding project;

[0049] Custom loading is bound to DOM elements through v-loading. The created DOM element containing the loading core module is inserted into the element with the custom instruction added to achieve dynamic loading effect on the element bound to the custom loading.

[0050] In some embodiments, registering the loading instruction in the Vue.directive() method and writing necessary hook functions for the loading instruction to form a VUE custom instruction also includes:

[0051] Based on VUE's responsive mechanism, when the attribute value changes, the hook function update of the custom instruction is triggered:

[0052] When true, the loading core module is inserted into the created DOM element to display loading;

[0053] If false, the loading core module will be unloaded from the created DOM element.

[0054] In the specific example, the anti-shake throttling function can also be used inside the module to reduce the triggering frequency of the instruction and prevent repeated triggering of the creation and unloading operations of the DOM elements.

[0055] Furthermore, it also includes functional testing of the developed VUE custom instructions, and through the v-loading binding instruction, verifying whether the corresponding bound elements can show the dynamic effect of loading when the bound value changes.

[0056] In some embodiments, applying the VUE custom instruction includes:

[0057] The formed VUE custom directives are developed as separate modules to achieve reuse. For example, they can be reused in different projects; you can also create an npm project mode and publish it to npm. You can download the custom directives through npminstal as needed in different projects and then register them in the project using vue.directive to use the custom directives globally.

[0058] Utilize Vue's responsive data binding mechanism to dynamically change the parameter values ​​of the VUE custom instructions to adapt to different scenarios.

[0059] Based on the method of the embodiment of the present application, when v-bind binding is used, the currently bound element can be obtained, and the loading module can be inserted into the specified DOM element through the js method.

[0060] Controls the display and hiding of loading. When the bound value is true, rebind the loading module; if it is false, directly uninstall and remove the created element.

[0061] Use v-bind to customize loading instructions and improve hook methods such as beforeMount, updated, and unmounted.

[0062] When unmounted, remove the elements created in the corresponding loading instruction.

[0063] Providing log output in other hook functions helps developers to view the execution flow and error messages.

[0064] The method of the embodiment of the present application can significantly improve the development efficiency of Vue through instruction design and application strategy.

[0065] The embodiment of the present application also provides a VUE custom instruction development system, which is characterized by comprising a processor and a memory, wherein a computer program is stored in the memory, and when the computer program is executed by the processor, the steps of the VUE custom instruction development method as described above are implemented.

[0066] It should be noted that in the various embodiments of the present application, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also includes other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "includes a ..." does not exclude the presence of other identical elements in the process, method, article or device including the element.

[0067] The serial numbers of the above-mentioned embodiments of the present application are for description only and do not represent the advantages or disadvantages of the embodiments.

[0068] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for a terminal (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the methods described in each embodiment of the present application.

[0069] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of the present application, ordinary technicians in this field can also make many forms without departing from the purpose of the present application and the scope of protection of the claims, all of which are within the protection of the present application.

Claims

1. A method for developing a VUE custom instruction, characterized in that: include: Determine the content of the requirements; Configure the basic information of the command interface according to the required content, and define the command name as loading to form a loading command; Register the loading directive in the Vue.directive() method, and write necessary hook functions for the loading directive to form a VUE custom directive; Apply the VUE custom instruction.

2. The method for developing a VUE custom instruction as claimed in claim 1, characterized in that: Determine the requirements including: In the process of front-end and back-end interaction through ajax, after waiting for the ajax request to complete, different content is displayed according to the returned data results, and the loading status requirements are determined.

3. The method for developing a VUE custom instruction as claimed in claim 1, characterized in that: The basic information of the command interface is configured according to the required content, including: the name, parameters, modifiers of the command interface, and, Parameters are reserved for the loading instruction, wherein the reserved parameters include one or more of the following: text content, font color, icon color, and size.

4. The method for developing a VUE custom instruction according to claim 1, characterized in that: Register the loading directive in the Vue.directive() method, and write necessary hook functions for the loading directive to form a VUE custom directive including: Create a DOM element through the js method to serve as a container for the loading instruction; Use the getAttribute method to obtain all attributes on the DOM element bound to the instruction, set the corresponding animation, prompt text and anti-shake time for the loading instruction through the obtained attributes, and register the loading instruction and add it to the DOM element; Generate the core internal structure of the loading instruction through js, use the svg vector icon as the icon of the loading instruction, create text to display the DOM element, and set the required style for the loading instruction by adding class names or creating a style level style sheet.

5. The method for developing a VUE custom instruction as claimed in claim 4, characterized in that: Register the loading directive in the Vue.directive() method, and write necessary hook functions for the loading directive to form a VUE custom directive, which also includes: Generate the corresponding tags through the js method document.createElement('style') of the custom hierarchical style sheet, put the written style sheet into it, and add the style sheet to the head element to achieve the style effect of the custom instructions in all positions of the corresponding project; Custom loading is bound to DOM elements through v-loading. The created DOM element containing the loading core module is inserted into the element with the custom instruction added to achieve dynamic loading effect on the element bound to the custom loading.

6. The method for developing a VUE custom instruction as claimed in claim 5, characterized in that: Register the loading directive in the Vue.directive() method, and write necessary hook functions for the loading directive to form a VUE custom directive, which also includes: Based on VUE's responsive mechanism, when the attribute value changes, the hook function update of the custom instruction is triggered: When true, the loading core module is inserted into the created DOM element to display loading; If false, the loading core module will be unloaded from the created DOM element.

7. The method for developing a VUE custom instruction as claimed in claim 4, characterized in that: Creating a DOM element by a js method as a container of the loading instruction also includes: Add a class name to the DOM element, and add the class name of the required animation to the created DOM element to achieve the animation effect of the loading instruction.

8. The method for developing a VUE custom instruction as claimed in claim 6, characterized in that: Applying the VUE custom instructions includes: Develop the formed VUE custom instructions as separate modules to achieve reuse; or, Utilize Vue's responsive data binding mechanism to dynamically change the parameter values ​​of the VUE custom instructions to adapt to different scenarios.

9. A VUE custom instruction development system, characterized in that: The method comprises a processor and a memory, wherein a computer program is stored in the memory, and when the computer program is executed by the processor, the steps of the method for developing a VUE custom instruction as claimed in any one of claims 1 to 8 are implemented.

Images