1. Vue page composition
In the current project, the Vue pages are all in the form of component matryoshka, and the entire page is spliced by components one by one. A component is a .vue file. Components usually consist of two parts: template and script:
Template part: the specific element content displayed on the page, such as text, text box, button, picture, etc.
Script part: the specific method function, interaction and other codes involved in the page.
An example of template content is as follows:
Two, script content
2.1 data()
Define the value of each text box on the page, realize two-way data binding and automatically fill in data:
2.2 mounted()、methods
mounted mainly defines the method to be executed after the page data is loaded: for example, your page has been loaded, and then you can generate a QR code image through operations. The QR code needs to be displayed in a certain area on the page, so display the QR code The code for this method is written in mounted.
The method mainly defines all operations performed on the page, and the method functions corresponding to the operations are all written in the method:
2.3 created()
The methods that need to be executed before the page element content is loaded are placed under created().
For example, if you want to get the current timestamp, and then assign the timestamp to a text box on the page as the initial value of the text box, then the method call to get the current timestamp should be written under created():
2.4 watch()
watch is mainly used to listen to changes in the response data of the Vue instance, and is usually used to process some values that need to change dynamically: for example, as shown in the figure below, it listens to changes in the activityId value and combines the changed value with the value of merchantNo as The value of couponCode:
In addition, watch can only monitor one layer, because we need to process the data under the form, and the first layer cannot be monitored, so we need to use deep:true for in-depth monitoring. immediate:true indicates that it will monitor during initialization, if it is set to false, it will not monitor during initialization, and only monitor when the data changes.
2.5 computed()
Computed is mainly used for complex calculations, and due to the cache mechanism, the performance overhead is relatively small. The method of use is shown in the figure below:
In fact, simple calculations can achieve the same effect using methods. However, because computed has a caching mechanism, as long as the data layer value does not change, computed will not recalculate once, and the functions in methods must be executed every time it is called, so it is recommended to use computed for complex calculations:
In addition, when calling, the members defined by computed are accessed like attributes, and the members defined by methods must be called as functions. For example, as shown in the figure above, to call computed directly: {
{fullName}}, and to call methods must be called as a function: { {
Names()}}.