|
1 生命周期
相比之下，小程序的钩子函数要简单一些。
vue的钩子函数在跳转新页面时，钩子函数都会触发；但小程序中，页面不同的跳转方式，触发的钩子并不一样。
- onLoad：页面加载
一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。 - onShow：页面显示
每次打开页面都会调用一次。 - onReady：页面初次渲染完成
一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。 - onHide：页面隐藏
当navigateTo或底部tab切换时调用。 - onUnload：页面卸载
当redirectTo或navigateBack的时候调用。
数据请求
在页面加载请求数据时，两者钩子的使用类似，vue一般会在created或者mounted中请求数据，而在小程序，会在onLoad或者onShow中请求数据。
2 数据绑定
vue动态绑定一个变量的值为元素的某个属性的时候，会在变量前面加上冒号：，例：
<img :src="imgSrc"/>
小程序绑定某个变量的值为元素属性时，会用两个大括号括起来，如果不加括号，为被认为是字符串。例：
<image src="{{imgSrc}}"></image>
3 事件处理
vue使用 v-on:event 绑定事件：
<button @click="f1">A</button>
<button @click.stop="f2">B</button> // 阻止事件冒泡
小程序使用 bindtap(bind+event)：
<button bindtap="f1">A</button>
<button catchtap="f2">B</button> // 阻止事件冒泡
4 数据双向绑定
在vue中，只需要再表单元素上加上v-model，然后再绑定data中对应的一个值，当表单元素内容发生变化时，data中对应的值也会相应改变：
<input v-model="msg" />
但是在小程序中，却没有这个功能。可以通过以下方式实现：
当表单内容发生变化时，会触发表单元素上绑定的方法，然后在该方法中，通过this.setData({key:value})来将表单上的值赋值给data中的对应值：
<input bindinput="bindMsg" value='{{msg}}'/>
bindMsg(e) {
this.setData({
msg: e.detail.value
})
}
|