生命周期
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;
}
})