vue和小程序的比较

生命周期

vue的钩子函数:
beforeCreat: 创建前
created: 创建
beforeMount: 挂载前
mounted: 挂载
beforeupdate: 更改前
updated: 更改
beforeDestroy: 销毁前
destroyed: 销毁

小程序的钩子函数:
onLoad: 页面加载
onShow: 页面显示
onReady: 页面初次渲染完成
onHide: 页面隐藏
onUnload: 页面卸载

数据请求

vue一般会在created或者mounted中请求数据，而在小程序，会在onLoad或者onShow中请求数据

数据绑定

vue动态绑定一个变量的值为元素的某个属性的时候，会在变量前面加上冒号：

<img :src="imgSrc"/>

小程序绑定某个变量的值为元素属性时，会用两个大括号括起来

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

显示与隐藏元素

vue使用v-if 和v-show控制元素的显示和隐藏
小程序使用wx-if和hidden控制元素的显示和隐藏

事件处理

vue使用v-on:event绑定事件，或者使用@event绑定事件，@event.stop阻止事件冒泡
小程序用bindtap(bind+event)，或者catchtap(catch+event)绑定事件，阻止事件冒泡

列表渲染

vue中如下:

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

var example1 = new Vue({
  el: '#example',
  data: {
    items: [
      { message: 'One' },
      { message: 'Two' }
    ]
  }
})

小程序中如下：

Page({
  data: {
    items: [
      { message: 'One' },
      { message: 'Two' }
    ]
  }
})

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

数据双向绑定

vue中的表单元素上加v-model，然后再绑定data中对应的值

<div id="app">
    <input v-model="reason" placeholder="填写原因" class='reason'/>
</div>

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

小程序中通过this.setData({key:value})将表单上的值赋值给data中的对应值

<input bindinput="bindReason" placeholder="填写原因" class='reason' value='{{reason}}' name="reason" />

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

事件传参

vue中需要在触发事件的方法中，把需要传递的数据作为形参传入

<button @click="say('hello')"></button>

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

小程序中需要将参数作为属性值，绑定到元素上的data-属性上，然后在方法中，通过e.currentTarget.dataset.*的方式获取，从而完成参数传递

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

最后编辑于：2020.05.13 12:21:43