What is the difference between vue and mini programs?

The difference between vue and mini programs: 1. Vue generally requests data in created or mounted, while in mini programs, it requests data in onLoad or onShow; 2. Vue dynamically binds the value of a variable to When an attribute of an element is specified, a colon will be added in front of the variable, and when the applet binds the value of a variable to an element attribute, it will be enclosed in two curly brackets; 3. Vue uses "v-if" and "v-show" controls the display and hiding of elements, and the mini program uses "wx-if" and hidden.

#The operating environment of this article: Windows 10 system, Vue3 version, Dell G3 computer.

What is the difference between vue and mini program

1. The life cycle functions are different:

- WeChat mini program For onLoad: page loading, onShow: page display, onReady: page initial rendering completed, onHide: page hidden, onUnload: page unloaded.

- When Vue's hook function jumps to a new page, the hook function will be triggered. However, the hook function of the mini program will trigger different hooks depending on the page jump method. beforecreate, created are suitable for network requests, beforemout updates data, moved, beforeupdate, updated, beforedestory, destroyed.

2. The data request time is different:

When the page loads to request data, the use of the two hooks is somewhat similar, and Vue will generally Data is requested in created or mounted, while in mini programs, data is requested in onLoad or onShow.

3. The data binding methods are different:

When vue dynamically binds the value of a variable to an attribute of the element, A colon will be added in front of the variable. Mini program: When the value of a variable is bound to an element attribute, it will be enclosed in two curly brackets. If there are no brackets, it will be considered a string.

4. Displaying and hiding elements are different:

In vue, use v-if and v-show to control the display and hiding of elements. . In the applet, use wx-if and hidden to control the display and hiding of elements.

5. Event processing is different:

vue: Use v-on:event to bind events, or use @event to bind events ;In mini programs, use bindtap="" or catchtap='' to bind events. catchtap prevents events from bubbling.

6. Two-way data binding is different:

In vue, you only need to add v-model to the form element, and then Then bind a corresponding value in data. When the content of the form element changes, the corresponding value in data will also change accordingly. In the mini program, when the form content changes, the method bound to the form element will be triggered, and then in this method, the value on the form is assigned to the value in data through this.setData({key:value}) corresponding value.

7. Binding event parameters are different:

In vue, binding event parameters only need to be passed in the method that triggers the event. , pass in the data that needs to be transferred as formal parameters. In the applet, you cannot directly pass in parameters in the method of binding events. You need to use the parameters as attribute values, bind them to the data-attribute on the element, and then use e.currentTarget.dataset.* in the method. Get, thereby completing the passing of parameters.

8. Communication between parent and child components is different:

Creation of child components is different:

• Required in vue:

1. Write sub-components;

2. Introduce through import in the parent component that needs to be used;

3. Register in the components of vue;

4. Use it in the template.

• In the mini program, you need:

1. Write the subcomponent

2. In the json file of the subcomponent , declare the file as a component;

3. In the json file of the parent component that needs to be introduced, fill in the component name and path of the imported component in usingComponents;

4. In the parent component , you can introduce it directly;

The parent and child components pass different values:

• In vue,

To pass data from the parent component to the child component, you only need to pass in a value through v-bind in the child component. In the child component, you can complete the data transfer by receiving it through props. The communication between the child component and the parent component can be done through this .emit passes methods and data to the parent component.

• In the mini program,

The parent component directly assigns the value to a variable, and in the child component properties, receives the passed value.

If the parent component wants to call the method of the subcomponent

vue will add a ref attribute to the subcomponent, and the subcomponent can be obtained through the value of this.refs.ref, and then You can call any method in the child component.

The applet is to add an id or class to a subcomponent, then find the subcomponent through this.selectComponent, and then call the method of the subcomponent.

Recommended learning: "nodejs video tutorial"

The above is the detailed content of What is the difference between vue and mini programs?. For more information, please follow other related articles on the PHP Chinese website!