Vue attribute value acquisition method and device based on browser DOM access
By assigning unique identifiers to the DOM elements of Vue components and establishing mapping relationships, the problem of not being able to directly access the attribute values of DOM elements in the Vue framework is solved, and efficient attribute value acquisition and data synchronization is achieved, simplifying the development process and improving performance.
Patent Information
- Application Number
- CN202411978904.1
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-31
- Publication Date
- 2025-04-08
AI Technical Summary
When using the Vue framework, developers cannot directly access the attribute values of browser DOM elements. The existing access methods are cumbersome and costly in complex components, and frequent DOM operations may affect performance.
By assigning a unique identity to each DOM element, the browser DOM query method is used to query the DOM element with the same unique identity within a specific life cycle of the Vue component, and a mapping relationship is established to achieve direct access to the attribute value of the DOM element.
This method realizes two-way binding and data synchronization by establishing mapping relationships between different instances, reducing development complexity, improving access and operation efficiency of browser DOM element attribute values, simplifying operation flow and reducing performance overhead.
Smart Images
Figure CN119781865A_ABST
Abstract
Description
Technical Field
[0001] The present invention belongs to the field of nuclear power technology, and in particular relates to a method and device for obtaining Vue attribute values based on browser DOM access. Background Art
[0002] In the related art, when developers use the Vue framework, they usually rely on Vue's data binding mechanism to access and manipulate the attribute values of browser DOM elements. However, due to the responsive nature of Vue, developers cannot directly access the attribute values of a specific element. Existing access methods usually rely on the methods provided by Vue, which have certain limitations. For example: developers need to obtain attribute values through Vue instances, which makes the operation process cumbersome, especially in complex components, the cost of finding and updating element attributes is high. For example, in some cases, developers need to frequently perform browser DOM operations, and Vue's reaction mechanism may have a negative impact on performance. Summary of the invention
[0003] In order to overcome the problems existing in the related art, a method and device for obtaining Vue attribute values based on browser DOM access are provided.
[0004] According to one aspect of an embodiment of the present disclosure, a method for obtaining a Vue attribute value based on browser DOM access is provided, the method comprising:
[0005] Step 101, assigning a unique identifier to each DOM element of the browser configured with the Vue component, different DOM elements correspond to the same or different instances, and each DOM element includes an attribute category and an attribute value;
[0006] Step 102, using a browser DOM query method, querying DOM elements with the same unique identifier among all DOM elements within a specific life cycle of the Vue component;
[0007] Step 103: Establish a mapping relationship between DOM elements with the same unique identifier.
[0008] In a possible implementation, the method further includes:
[0009] Step 104, when an event of a DOM element is detected, if the DOM element has other DOM elements with a mapping relationship, the attribute value updated by the DOM element corresponding to the event is synchronously updated to the other DOM elements with the mapping relationship.
[0010] In one possible implementation, in step 104, a configured event listener is used to listen to events of each DOM element. When the event listener listens to an event of a DOM element, if it is determined that there are other DOM elements with a mapping relationship to the DOM element, the attribute value updated by the corresponding event of the DOM element is synchronously updated to the other DOM elements with a mapping relationship.
[0011] In a possible implementation, the unique identifier is a class name or an identification code.
[0012] According to another aspect of an embodiment of the present disclosure, a Vue attribute value acquisition device based on browser DOM access is provided, the device comprising:
[0013] The identification module is used to assign a unique identifier to each DOM element of the browser that configures the Vue component. Different DOM elements correspond to the same or different instances. Each DOM element includes an attribute category and an attribute value.
[0014] A query module, for using a browser DOM query device to query DOM elements with the same unique identifier among all DOM elements within a specific life cycle of a Vue component;
[0015] The mapping module is used to establish a mapping relationship between DOM elements with the same unique identifier.
[0016] In a possible implementation manner, the device further includes:
[0017] The synchronization module is used to, when an event of a DOM element is detected, if the DOM element has other DOM elements with a mapping relationship, synchronize the attribute value updated by the DOM element corresponding to the event to the other DOM elements with the mapping relationship.
[0018] In one possible implementation, in the synchronization module, a configured event listener is used to listen to events of each DOM element. When the event listener listens to an event of a DOM element, if it is determined that there are other DOM elements with a mapping relationship to the DOM element, the attribute value updated by the corresponding event of the DOM element is synchronously updated to the other DOM elements with a mapping relationship.
[0019] In a possible implementation, the unique identifier is a class name or an identification code.
[0020] According to another aspect of an embodiment of the present disclosure, a Vue attribute value acquisition device based on browser DOM access is provided, the device comprising:
[0021] processor;
[0022] a memory for storing processor-executable instructions;
[0023] Wherein, the processor is configured to execute the above method.
[0024] According to another aspect of an embodiment of the present disclosure, a non-volatile computer-readable storage medium is provided, on which computer program instructions are stored, and the computer program instructions implement the above method when executed by a processor.
[0025] The beneficial effects of the present disclosure are as follows: the Vue attribute value acquisition method based on browser DOM access provided by the present disclosure can establish a mapping relationship between different instances through a unique identifier, thereby obtaining its attribute value by directly accessing the browser DOM element, so that the associated attributes between different instances can achieve two-way binding and data synchronization, which can effectively reduce the development complexity and improve the user's access to the browser DOM element attribute value and operation efficiency; through the simplified operation process and reduced performance overhead, the development of Vue applications is more convenient and efficient. BRIEF DESCRIPTION OF THE DRAWINGS
[0026] Figure 1 The present invention is a flowchart of a method for obtaining a Vue attribute value based on browser DOM access according to an exemplary embodiment.
[0027] Figure 2 The present invention is a block diagram of a Vue attribute value acquisition device based on browser DOM access shown in an application example.
[0028] Figure 3 It is a block diagram of a Vue attribute value acquisition device based on browser DOM access according to an exemplary embodiment. DETAILED DESCRIPTION
[0029] The present invention is further described in detail below with reference to the accompanying drawings and specific embodiments.
[0030] Figure 1 This is a flowchart of a method for obtaining a Vue attribute value based on browser DOM access according to an exemplary embodiment. The method can be executed by a terminal device, wherein the terminal device can be a computer, for example, a server, a desktop computer, a laptop computer, a tablet computer, etc. The embodiment of the present disclosure does not limit the type of the terminal device. Figure 1 As shown, the method includes:
[0031] Step 101, assign a unique identifier to each DOM element of the browser configured with the Vue component, different DOM elements correspond to the same or different instances, and each DOM element includes an attribute category and an attribute value.
[0032] In step 101, the unique identifier may be a class name or an identification code, and a unique identifier may be assigned to each DOM element of the browser according to a preset rule during the process of initializing the browser.
[0033] Step 102, using a browser DOM query method, in a specific life cycle of the Vue component (e.g., the mounted phase), querying DOM elements with the same unique identifier among all DOM elements;
[0034] Step 103: Establish a mapping relationship between DOM elements with the same unique identifier.
[0035] In one application example, Figure 2 As shown, the first instance of the Vue component is configured with a DOM element marked as "input box" (which can be, for example, a browser input box), and the class name of the DOM element is: my-input (an example of a unique identifier), and the second instance is configured with a DOM element marked as "input box", and the class name of the DOM element is also marked as: my-input (an example of a unique identifier), so that a mapping relationship can be established between the DOM elements of two different instances by assigning the same class name my-input. This mapping relationship enables the Vue component to quickly access and operate the browser input box element.
[0036] The Vue attribute value acquisition method based on browser DOM access provided by the present invention can establish a mapping relationship between different instances through a unique identifier, so that the attribute value of the browser DOM element can be obtained by directly accessing the browser DOM element, so that the associated attributes between different instances can achieve two-way binding and data synchronization, which can effectively reduce the development complexity and improve the user's access to the browser DOM element attribute value and operation efficiency; through the simplified operation process and reduced performance overhead, the development of Vue applications is more convenient and efficient.
[0037] In a possible implementation, the method further includes:
[0038] Step 104, when an event of a DOM element is detected, if the DOM element has other DOM elements with a mapping relationship, the attribute value updated by the DOM element corresponding to the event is synchronously updated to the other DOM elements with the mapping relationship.
[0039] As an example of this embodiment, in step 104, a configured event listener can be used to listen to events of each DOM element. When the event listener listens to the event of a DOM element, if it is determined that there are other DOM elements with a mapping relationship to the DOM element, the attribute value updated by the corresponding event of the DOM element is synchronously updated to the other DOM elements with a mapping relationship.
[0040] Continuing with the previous example, when an input event with the class name my-input is triggered in the browser, the event listener will be triggered to obtain the current attribute value "example" corresponding to the input event, and update the attribute value of the DOM element with the class name: my-input in the Vue component. In this way, the content input by the user interface is updated to the Vue data model to ensure data synchronization.
[0041] The present disclosure can obtain updated attribute values corresponding to an event and synchronize them to the associated DOM element in a timely manner through an event listener when an event is generated by a DOM element, thereby achieving rapid data synchronization.
[0042] According to another aspect of an embodiment of the present disclosure, a Vue attribute value acquisition device based on browser DOM access is provided, the device comprising:
[0043] The identification module is used to assign a unique identifier to each DOM element of the browser that configures the Vue component. Different DOM elements correspond to the same or different instances. Each DOM element includes an attribute category and an attribute value.
[0044] A query module, for using a browser DOM query device to query DOM elements with the same unique identifier among all DOM elements within a specific life cycle of a Vue component;
[0045] The mapping module is used to establish a mapping relationship between DOM elements with the same unique identifier.
[0046] In a possible implementation manner, the device further includes:
[0047] The synchronization module is used to, when an event of a DOM element is detected, if the DOM element has other DOM elements with a mapping relationship, synchronize the attribute value updated by the DOM element corresponding to the event to the other DOM elements with the mapping relationship.
[0048] In one possible implementation, in the synchronization module, a configured event listener is used to listen to events of each DOM element. When the event listener listens to an event of a DOM element, if it is determined that there are other DOM elements with a mapping relationship to the DOM element, the attribute value updated by the corresponding event of the DOM element is synchronously updated to the other DOM elements with a mapping relationship.
[0049] In a possible implementation, the unique identifier is a class name or an identification code.
[0050] For the description of the above-mentioned device, please refer to the description of the above-mentioned method, which will not be repeated here.
[0051] Figure 31900 is a block diagram of a Vue attribute value acquisition device based on browser DOM access according to an exemplary embodiment, and is a block diagram of a post-flooding critical heat exchange analysis device according to an exemplary embodiment. For example, the device 1900 can be provided as a server. Figure 3 , the apparatus 1900 includes a processing component 1922, which further includes one or more processors, and a memory resource represented by a memory 1932 for storing instructions, such as an application, that can be executed by the processing component 1922. The application stored in the memory 1932 may include one or more modules, each corresponding to a set of instructions. In addition, the processing component 1922 is configured to execute instructions to perform the above method.
[0052] The device 1900 may also include a power supply component 1926 configured to perform power management of the device 1900, a wired or wireless network interface 1950 configured to connect the device 1900 to a network, and an input / output (I / O) interface 1958. The device 1900 may operate based on an operating system stored in the memory 1932, such as Windows Server™, MacOS X™, Unix™, Linux™, FreeBSD™, or the like.
[0053] In an exemplary embodiment, a non-volatile computer-readable storage medium is also provided, such as a memory 1932 including computer program instructions, which can be executed by the processing component 1922 of the device 1900 to perform the above method.
[0054] The present disclosure may be a system, a method and / or a computer program product. The computer program product may include a computer-readable storage medium carrying computer-readable program instructions for causing a processor to implement various aspects of the present disclosure.
[0055] A computer-readable storage medium may be a tangible device that can hold and store instructions used by an instruction execution device. A computer-readable storage medium may be, for example, but not limited to, an electrical storage device, a magnetic storage device, an optical storage device, an electromagnetic storage device, a semiconductor storage device, or any suitable combination of the foregoing. More specific examples of computer-readable storage media (a non-exhaustive list) include: a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a static random access memory (SRAM), a portable compact disk read-only memory (CD-ROM), a digital versatile disk (DVD), a memory stick, a floppy disk, a mechanical encoding device, such as a punch card or a raised structure in a groove on which instructions are stored, and any suitable combination of the foregoing. As used herein, a computer-readable storage medium is not to be interpreted as a transient signal per se, such as a radio wave or other freely propagating electromagnetic wave, an electromagnetic wave propagating through a waveguide or other transmission medium (e.g., a light pulse through a fiber optic cable), or an electrical signal transmitted through a wire.
[0056] The computer-readable program instructions described herein can be downloaded from a computer-readable storage medium to each computing / processing device, or downloaded to an external computer or external storage device via a network, such as the Internet, a local area network, a wide area network, and / or a wireless network. The network can include copper transmission cables, optical fiber transmissions, wireless transmissions, routers, firewalls, switches, gateway computers, and / or edge servers. The network adapter card or network interface in each computing / processing device receives the computer-readable program instructions from the network and forwards the computer-readable program instructions for storage in the computer-readable storage medium in each computing / processing device.
[0057] The computer program instructions for performing the operation of the present disclosure may be assembly instructions, instruction set architecture (ISA) instructions, machine instructions, machine-related instructions, microcode, firmware instructions, state setting data, or source code or object code written in any combination of one or more programming languages, including object-oriented programming languages, such as Smalltalk, C++, etc., and conventional procedural programming languages, such as "C" language or similar programming languages. Computer-readable program instructions may be executed completely on a user's computer, partially on a user's computer, as an independent software package, partially on a user's computer, partially on a remote computer, or completely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer via any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., using an Internet service provider to connect via the Internet). In some embodiments, an electronic circuit, such as a programmable logic circuit, a field programmable gate array (FPGA), or a programmable logic array (PLA), may be customized by utilizing the state information of the computer-readable program instructions, and the electronic circuit may execute the computer-readable program instructions, thereby realizing various aspects of the present disclosure.
[0058] Various aspects of the present disclosure are described herein with reference to the flowcharts and / or block diagrams of the methods, devices (systems) and computer program products according to the embodiments of the present disclosure. It should be understood that each box in the flowchart and / or block diagram and the combination of each box in the flowchart and / or block diagram can be implemented by computer-readable program instructions.
[0059] These computer-readable program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device, thereby producing a machine, so that when these instructions are executed by the processor of the computer or other programmable data processing device, a device that implements the functions / actions specified in one or more boxes in the flowchart and / or block diagram is generated. These computer-readable program instructions can also be stored in a computer-readable storage medium, and these instructions cause the computer, programmable data processing device, and / or other equipment to work in a specific manner, so that the computer-readable medium storing the instructions includes a manufactured product, which includes instructions for implementing various aspects of the functions / actions specified in one or more boxes in the flowchart and / or block diagram.
[0060] Computer-readable program instructions may also be loaded onto a computer, other programmable data processing apparatus, or other device so that a series of operating steps are performed on the computer, other programmable data processing apparatus, or other device to produce a computer-implemented process, thereby causing the instructions executed on the computer, other programmable data processing apparatus, or other device to implement the functions / actions specified in one or more boxes in the flowchart and / or block diagram.
[0061] The flow chart and block diagram in the accompanying drawings show the possible architecture, function and operation of the system, method and computer program product according to multiple embodiments of the present disclosure. In this regard, each square box in the flow chart or block diagram can represent a part of a module, program segment or instruction, and a part of the module, program segment or instruction includes one or more executable instructions for realizing the specified logical function. In some alternative implementations, the function marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two continuous square boxes can actually be executed substantially in parallel, and they can sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs the specified function or action, or can be implemented with a combination of special hardware and computer instructions.
[0062] The embodiments of the present disclosure have been described above, and the above description is exemplary, not exhaustive, and is not limited to the disclosed embodiments. Many modifications and changes will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the described embodiments. The selection of terms used herein is intended to best explain the principles of the embodiments, practical applications, or improvements to the technology in the market, or to enable other persons of ordinary skill in the art to understand the embodiments disclosed herein.
Claims
1. A method for obtaining Vue attribute values based on browser DOM access, characterized in that: The method comprises: Step 101, assigning a unique identifier to each DOM element of the browser configured with the Vue component, different DOM elements correspond to the same or different instances, and each DOM element includes an attribute category and an attribute value; Step 102, using a browser DOM query method, querying DOM elements with the same unique identifier among all DOM elements within a specific life cycle of the Vue component; Step 103: Establish a mapping relationship between DOM elements with the same unique identifier.
2. The method according to claim 1, characterized in that The method further comprises: Step 104, when an event of a DOM element is detected, if the DOM element has other DOM elements with a mapping relationship, the attribute value updated by the DOM element corresponding to the event is synchronously updated to the other DOM elements with the mapping relationship.
3. The method according to claim 2, characterized in that In step 104, the configured event listener is used to listen to the events of each DOM element. When the event listener listens to the event of a DOM element, if it is determined that there are other DOM elements with a mapping relationship with the DOM element, the attribute value updated by the corresponding event of the DOM element is synchronously updated to the other DOM elements with a mapping relationship.
4. The method according to claim 1, characterized in that: The unique identifier is either a class name or an identification code.
5. A Vue attribute value acquisition device based on browser DOM access, characterized in that: The device comprises: The identification module is used to assign a unique identifier to each DOM element of the browser that configures the Vue component. Different DOM elements correspond to the same or different instances. Each DOM element includes an attribute category and an attribute value. A query module, for using a browser DOM query device to query DOM elements with the same unique identifier among all DOM elements within a specific life cycle of a Vue component; The mapping module is used to establish a mapping relationship between DOM elements with the same unique identifier.
6. The device according to claim 1, characterized in that The device also includes: The synchronization module is used to, when an event of a DOM element is detected, if the DOM element has other DOM elements with a mapping relationship, synchronize the attribute value updated by the DOM element corresponding to the event to the other DOM elements with the mapping relationship.
7. The device according to claim 2, characterized in that In the synchronization module, a configured event listener is used to listen to events of each DOM element. When the event listener listens to an event of a DOM element, if it is determined that there are other DOM elements with a mapping relationship to the DOM element, the attribute value updated by the corresponding event of the DOM element is synchronously updated to the other DOM elements with a mapping relationship.
8. The device according to claim 1, characterized in that The unique identifier is either a class name or an identification code.
9. A Vue attribute value acquisition device accessed by a browser DOM, characterized in that: The device comprises: processor; a memory for storing processor-executable instructions; The processor is configured to execute the method according to any one of claims 1 to 4.
10. A non-volatile computer-readable storage medium having computer program instructions stored thereon, characterized in that: When the computer program instructions are executed by a processor, the method according to any one of claims 1 to 4 is implemented.