Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of what is the difference between vue and WeChat Mini Programs, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this vue and WeChat Mini Programs. Let's take a look at it.

I. Life cycle

By contrast, the hook function of Mini Program is much simpler.

Vue's hook function triggers when it jumps to a new page, but Mini Program's hook function, depending on the way the page jumps, triggers different hooks.

OnLoad: page loading

A page is called only once, and you can get the query parameters that are called to open the current page in onLoad.

OnShow: page display

It is called every time the page is opened.

OnReady: the first rendering of the page is complete

A page is called only once, indicating that the page is ready to interact with the view layer.

For interface settings such as wx.setNavigationBarTitle, please set it after onReady. See life cycle for details

OnHide: page hiding

Called when navigateTo or the bottom tab is switched.

OnUnload: page unloading

Called when redirectTo or navigateBack.

Data request

When a page loads request data, the use of hooks is similar. Vue usually requests data in created or mounted, while in Mini Program, it requests data in onLoad or onShow.

II. Data binding

When VUE:vue dynamically binds a variable whose value is an attribute of the element, the variable is preceded by a colon:, for example:

Mini Program: when binding the value of a variable to an element attribute, it is enclosed in two curly braces. If it is left unbraced, it is considered a string. Example:

Third, list rendering

Directly paste the code, the two are still somewhat similar.

Vue: {{item.message}} var example1 = new Vue ({el:'# example-1', data: {items: [{message: 'Foo'}, {message:' Bar'}]}}) Mini Program: Page ({data: {items: [{message: 'Foo'}) {message: 'Bar'}]}) {{item}} IV. Show and hide elements

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

In Mini Program, use wx-if and hidden to control the display and hiding of elements

V. event handling

Vue: bind events using v-on:event or @ event, for example:

Add1 Add1 / / prevent the event from bubbling

In Mini Program, events are all bound with bindtap (bind+event) or catchtap (catch+event), for example:

If you don't go to work tomorrow, you won't go to work tomorrow / / stop the event from bubbling. 6. Two-way data binding 1. Set valu

In vue, you only need to add v-model to the form element, and then bind a corresponding value in data. When the content of the form element changes, the corresponding value in data will change accordingly, which is a very nice point in vue.

New Vue ({el:'# app', data: {reason:''}})

But in Mini Program, there is no such function. What are we going to do?

When the content of the form changes, it touches the method that is bound on a single element, and in this method, the value on the form is assigned to the corresponding value in data through this.setData ({key:value}).

Here is the code, you can feel it:

Page ({data: {reason:''}, bindReason (e) {this.setData ({reason: e.detail.value})})

When there are a lot of form elements on the page, changing the value is a manual task. Compared with Mini Program, vue's v-model is straightforward.

two。 Take a value

In vue, the value is obtained through this.reason

In Mini Program, the value is obtained through this.data.reason

7. Parameters are passed by binding events

In vue, it is easy to pass parameters by binding events, as long as the data to be passed is passed as formal parameters in the method that triggers the event, for example:

New Vue ({el:'# app', methods: {say (arg) {consloe.log (arg)})

In Mini Program, you cannot pass parameters directly in the method of binding events. You need to bind the parameters as attribute values to the data- attribute on the element, and then obtain them in the method by the way of e.currentTarget.dataset.

Page ({data: {reason:''}, toApprove (e) {let id = e.currentTarget.dataset. Id;}}) VIII, parent-child component communication 1. Use of subcomponents

In vue, you need to:

Write subcomponents

Introduced through import in the parent components that need to be used

Register in the components of vue

Use in templat

/ / subcomponent bar.vue export default {props: {title: {type:String, default:''}, methods: {say () {console.log ('not working tomorrow') This.$emit ('helloWorld')}} / / parent component foo.vue import Bar from'. / bar.vue' export default {data: {title: "I am the title"}, methods: {helloWorld () {console.log ('I received the event passed by the child component')}}, components: {Bar}

In Mini Program, you need to:

1. Write subcomponents

two。 Declare the file as a component in the json file of the subcomponent

{"component": true}

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

"usingComponents": {"tab-bar": ".. /.. / components/tabBar/tabBar"}

4. In the parent component, it can be introduced directly.

Specific code:

/ / the home page of the subcomponent is set 2. Communication between parent and child components in vue

If the parent component passes data to the child component, you only need to pass a value through v-bind in the child component, and in the child component, you can receive the data through props. For example:

/ / parent component foo.vue import Bar from'. / bar.vue' export default {data: {title: "I am the title"}, components: {Bar} / / subcomponent bar.vue export default {props: {title: {type:String, default:''}

The child component communicates with the parent component to pass methods and data to the parent component through this.$emit.

In Mini Program

The communication between the parent component and the child component is similar to vue, but instead of going through v-bind, Mini Program assigns a value directly to a variable, as follows:

Here, "index" is the value to be passed to the child component

In the subcomponent properties, receive the passed value

Properties: {/ / pop-up window title currentpage: {/ / attribute name type: String, / / type (required). Currently accepted types include: String, Number, Boolean, Object, Array, null (for any type) value: 'index' / / attribute initial value (optional). If not specified, a}} will be selected based on the type.

The communication between the child component and the parent component is similar to vue, with the following code:

/ / methods: {/ / passed to the parent component cancelBut: function (e) {var that = this in the child component Var myEventDetail = {pickerShow: false, type: 'cancel'} / / detail object, provided to the event listener function this.triggerEvent (' myevent', myEventDetail) / / myevent custom name event, used in the parent component},} / / in the parent component / / get the child component information toggleToast (e) {console.log (e.detail)}

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

Vue adds a ref attribute to the subcomponent, which can be obtained by the value of this.$refs.ref, and then any method in the subcomponent can be called, for example:

/ / Child component / / parent component this.$ref.bar. Methods of subcomponents

Mini Program is a way to add id or class to a subcomponent, then find it through this.selectComponent, and then call the subcomponent. Example:

/ / Child component / / parent component this.selectComponent ('# id'). SyaHello () this is the end of the article on "what's the difference between vue and WeChat Mini Programs". Thank you for reading! I believe you all have a certain understanding of the knowledge of "what is the difference between vue and WeChat Mini Programs". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.