What are the differences between vue and WeChat mini programs?

Difference: 1. "v-if" and "v-show" are used in vue to control the display and hiding of elements, while "wx-if" and "hidden" are used in mini programs; 2. vue Use "v-on:event" to bind events, while the mini program uses "bindtap(bind event)" to bind events.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

1. Life cycle

First post two pictures:

vue life cycle

mini program life cycle

#In comparison, the hook function ofmini programis much simpler. The hook function of

vuewill be triggered when jumping to a new page, but the hook function of小programwill be triggered in different jump methods of the page. Hooks are not the same.

• onLoad: Page loading
  A page will only be called once. You can get thequery called to open the current page inonLoadParameters.
• onShow: Page display
  will be called every time the page is opened.
• onReady: The initial rendering of the page is completed
  A page will only be called once, which means that the page is ready and can interact with the view layer.
  Please set interface settings such aswx.setNavigationBarTitleafteronReady. For details, see Life Cycle
• onHide: Page Hide
  Called whennavigateToor the bottom tab is switched.
• onUnload: Page unloading
  Called whenredirectToornavigateBack.

Data request

When the page is loaded to request data, the use of the two hooks is somewhat similar,vuewill generally be in ## Data is requested in #createdormounted, while inminiprogram, data will be requested inonLoadoronShow.

VUE: When Vue dynamically binds a variable whose value is an attribute of an element, it will add a colon in front of the variable: , Example:

小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 character. string. Example:

3. List rendering

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}}

4. Show and hide elements

vue, usev-ifandv-showcontrol the display and hiding of elements

In applet, usewx-ifandhiddenControl the display and hiding of elements

vue: Usev-on:eventBind the event, or use@eventto bind the event, for example:

Add 1 Add1 //阻止事件冒泡

In the applet, usebindtap(bind event), orcatchtap(catch event)binding event, for example:

明天不上班 明天不上班 //阻止事件冒泡

6. Two-way data binding

is in

, you only need to addv-modelto theformelement, and then bind ## A corresponding value in #data, when the content of the form element changes, the corresponding value indatawill also change accordingly. This is a very nice point invue.

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

When the content of the form changes, the method bound to the form element will be triggered, and then in this method, the value on the form will be assigned throughthis.setData({key:value})Give the corresponding value in
data.The following is the code, you can feel it:

<input bindinput="bindReason" placeholder="填写理由" class=&#39;reason&#39; value=&#39;{{reason}}&#39; name="reason" /> Page({ data:{ reason:&#39;&#39; }, bindReason(e) { this.setData({ reason: e.detail.value }) } })

vue’sv-modelis so cool.2. In the value

vue

this.reasonto get the valueIn the applet

this.data.reason7. Binding event parameters passing

in# In ##vue, binding event parameters is quite simple. You only need to pass in the data to be passed as formal parameters in the method that triggers the event, for example:

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

InIn the applet, parameters cannot be passed directly in the method of binding events. The parameters need to be used as attribute values, bound to the

attribute on the element, and then in the method , obtained throughe.currentTarget.dataset.*, so as to complete the transfer of parameters. It is very troublesome. Is there any...

<view class=&#39;tr&#39; bindtap=&#39;toApprove&#39; data-id="{{item.id}}"></view> Page({ data:{ reason:&#39;&#39; }, toApprove(e) { let id = e.currentTarget.dataset.id; } })

八、父子组件通信

//子组件 bar.vue   // 父组件 foo.vue  

// 父组件 foo.vue   // 子组件bar.vue  

 此处， “index”就是要向子组件传递的值

properties: { // 弹窗标题 currentpage: { // 属性名 type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型） value: 'index' // 属性初始值（可选），如果未指定则会根据类型选择一个 } }

//子组件中 methods: { // 传递给父组件 cancelBut: function (e) { var that = this; var myEventDetail = { pickerShow: false, type: 'cancel' } // detail对象，提供给事件监听函数 this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件，父组件中使用 }, } //父组件中  // 获取子组件信息 toggleToast(e){ console.log(e.detail) }

//子组件  //父组件 this.$ref.bar.子组件的方法

//子组件  // 父组件 this.selectComponent('#id').syaHello()