In contrast, the hook function of applet is much simpler.

When vue's hook function jumps to a new page, the hook function will trigger, but the hook function of the applet and the page Jump methods are different.

• onLoad: page loading A page can only be called once. You can get the query parameters called to open the current page in onLoad.
• onShow: page display Called every time you open a page.
• onReady: the first rendering of the page is completed A page can only be called once, which means that the page is ready to interact with the view layer. The interface settings are as shown in Wx Setnavigationbartitle please set after onReady. See life cycle for details
• onHide: page hide Called when navigateTo or the bottom tab switches.
• onUnload: page unload Called when redirectTo or navigateBack.

Data request

When the page loads the requested data, the use of the two hooks is somewhat similar. vue generally requests data in created or mounted, while in applet, it requests data in onLoad or onShow.

2, Data binding

Vue: when Vue dynamically binds a variable whose value is an attribute of an element, a colon will be added in front of the variable:, for example:

<img :src="imgSrc"/>

Applet: when the value of a bound variable is an element attribute, it will be enclosed by two curly braces. If it is not enclosed, it will be considered as a string. Example:

<image src="{{imgSrc}}"></image>

3, List rendering

Direct paste code, the two are still somewhat similar vue:

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

Applet:

Page({
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

<text wx:for="{{items}}">{{item}}</text>

4, Show and hide elements

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

In the applet, Wx if and hidden are used to control the display and hiding of elements

5, Event handling

vue: use v-on:event to bind events, or use @ event to bind events, for example:

<button v-on:click="counter += 1">Add 1</button>
<button v-on:click.stop="counter+=1">Add1</button>  //Prevent event bubbling

In the applet, all events are bound with bindtap(bind+event) or catch tap (catch + event), for example:

<button bindtap="noWork">Not to go to work tomorrow</button>
<button catchtap="noWork">Not to go to work tomorrow</button>  //Prevent event bubbling

6, Bidirectional data binding

1. Set value

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 of vue.

<div id="app">
    <input v-model="reason" placeholder="Fill in the reason" class='reason'/>
</div>

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

But in the applet, there is no such function. Then what shall I do? When the form content changes, the method bound on the form element will be triggered, and then in this method, through this SetData ({key: value}) to assign the value on the form to the corresponding value in data. Here is the code, you can feel it:

<input bindinput="bindReason" placeholder="Fill in the reason" class='reason' value='{{reason}}' name="reason" />

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

When there are many page form elements, changing the value is a manual job. Compared with small programs, vue's v-model is simply not cool.

2. Value

vue, through this Reason value

Applet, through this data. Reason value

7, Binding event parameters

In vue, it is very simple to bind event parameters. You only need to pass in the data to be passed as formal parameters in the method of triggering the event, for example:

<button @click="say('Not to go to work tomorrow')"></button>

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

In the applet, you cannot directly pass in parameters in the method of binding events. You need to bind the parameters as attribute values to the data attribute on the element, and then in the method, through e.currenttarget dataset.* To complete the transfer of parameters. It's troublesome. Is there

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

8, Parent child component communication

1. Use of sub components

In vue, you need to:

1. Write subcomponents
2. import in the parent component to be used
3. Register in vue's components
4. Use in template

//Sub assembly bar vue
<template>
  <div class="search-box">
    <div @click="say" :title="title" class="icon-dismiss"></div>
  </div>
</template>
<script>
export default{
props:{
    title:{
       type:String,
       default:''
      }
    }
},
methods:{
    say(){
       console.log('Not to go to work tomorrow');
       this.$emit('helloWorld')
    }
}
</script>

// Parent component foo vue
<template>
  <div class="container">
    <bar :title="title" @helloWorld="helloWorld"></bar>
  </div>
</template>

<script>
import Bar from './bar.vue'
export default{
data(){
    return{
        title:"I'm the title"
    }
},
methods:{
    helloWorld(){
        console.log('I received the event passed by the sub component')
    }
},
components:{
    Bar
}
</script>

In the applet, you need to:

Write subcomponents

In the of sub components json File, declare the file as a component
{   "component": true }

In the of the parent component to be imported json File, in usingComponents Fill in the component name and path of the imported component
"usingComponents": {     "tab-bar": "../../components/tabBar/tabBar"   }

In the parent component, you can import it directly
<tab-bar currentpage="index"></tab-bar>
Specific code:
// Subcomponent <-- components/tabBar/tabBar. Wxml -- > < view class ='tabbar wrapper '> < view class ='left-bar {{CurrentPage = "index"? "Active": ""}}' bindtap ='jumptoindex '> < text class ='iconfont icon Shouye' > < / text > < View > Home Page < / View > < view class ='right-bar {{CurrentPage = "setting"? "Active": ""} }'bindtap ='jumptosetting' > < text class ='iconfont icon Shezhi '> < / text > < View > setting < / View > < / View > < / View >

2. Communication between parent and child components

In vue

When the parent component transmits data to the child component, it only needs to pass in a value through v-bind in the child component and receive it through props in the child component to complete the data transmission. Example:

// Parent component foo vue
<template>
  <div class="container">
    <bar :title="title"></bar>
  </div>
</template>
<script>
import Bar from './bar.vue'
export default{
data(){
    return{        
        title:"I'm the title"
    }
},
components:{
    Bar
}
</script>

// Sub assembly bar vue
<template>
  <div class="search-box">
    <div :title="title" ></div>
  </div>
</template>
<script>
export default{
props:{
    title:{
       type:String,
       default:''
      }
    }
}
</script>

Child components and parent components can communicate through this$ Emit passes methods and data to the parent component.

In applet

The communication between parent component and child component is similar to vue, but the applet does not use v-bind, but directly assigns the value to a variable, as follows:

<tab-bar currentpage="index"></tab-bar>

Here“ index"Is the value to be passed to the child component

In the subcomponent properties, receive the passed value

properties: {
    // Pop up title
    currentpage: {            // Attribute name
      type: String,     // Type (required). Currently accepted types include: String, Number, Boolean, Object, Array, null (indicating any type)
      value: 'index'     // Property initial value (optional). If it is not specified, one will be selected according to the type
    }
  }

The communication between child components and parent components is similar to vue. The code is as follows:

//In subcomponents
methods: {   
    // Pass to parent component
    cancelBut: function (e) {
      var that = this;
      var myEventDetail = { pickerShow: false, type: 'cancel' } // The detail object is provided to the event listener function
      this.triggerEvent('myevent', myEventDetail) //myevent custom name event, used in parent component
    },
}

//In parent component
<bar bind:myevent="toggleToast"></bar>

// Get sub component information
toggleToast(e){
    console.log(e.detail)
}

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

vue will add a ref attribute to the sub component through this$ refs. The value of ref can get the sub component, and then you can call any method in the sub component, for example:

//Subcomponents
<bar ref="bar"></bar>

//Parent component
this.$ref.bar.Sub component method

Applet is to add id or class to the sub component, and then use this Selectcomponent finds the sub component and then calls the method of the sub component. Example:

//Subcomponents
<bar id="bar"></bar>

// Parent component
this.selectComponent('#id').syaHello()

Applet parent component changes child component style

1. The parent component passes style into the child component 2. The variable passed in by the parent component controls the style of the child component 3. In the parent component style, add the parent component class name before the child component class name

<view class='share-button-container' bindtap='handleShareBtn'>
   <share-button  product="{{goodProduct}}" type="1" back-color="#fff" fore-color="#9e292f" bind:error="on_error" />
</view>

.share-button-container .button--btn-navigator__hover{
  background: #fff;
}