生命周期
vue生命周期和小程序生命周期
vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。
onLoad: 页面加载
一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数。
onShow: 页面显示
每次打开页面都会调用一次。
onReady: 页面初次渲染完成
一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
onHide: 页面隐藏
当navigateTo或底部tab切换时调用。
onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。
数据请求
在页面加载请求数据时,两者钩子的使用有些类似,vue一般会在created或者mounted中请求数据,而在小程序,会在onLoad或者onShow中请求数据。
数据绑定
//vue数据绑定
<div id="app">
<p>{{ message }}</p>
<div v-html="message"></div>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
<div v-bind:id="'list-' + id">菜鸟教程</div>
<p v-if="seen">现在你看到我了</p>
<pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
//微信小程序数据绑定
<view> {{ message }} </view> //内容
<view id="item-{{id}}"> </view> //组件属性(需要在双引号之内)
<view wx:if="{{condition}}"> </view> //控制属性(需要在双引号之内)
<checkbox checked="{{false}}"> </checkbox> //关键字(需要在双引号之内)
<view hidden="{{flag ? true : false}}"> Hidden </view> //算数运算
<view> {{a + b}} + {{c}} + d </view>
<view wx:if="{{length > 5}}"> </view>
<view>{{"hello" + name}}</view>
<view>{{object.key}} {{array[0]}}</view>
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
从上面可以看出,小程序的变量绑定都用双大括号来包围的,如果不加括号,为被认为是字符串,
而vue只有文本内容才用到双大括号
vue动态绑定变量会在前面加冒号, 而小程序不需要加冒号,需要两个双大括号括起来
列表循环遍历
//vue遍历
<div v-for="(item, index) in dataArray" :key="index" v-if="index<5"></div>
//微信小程序遍历
<view wx:for="{{dataArray}}" wx:key="index" wx:for-item="item" wx:if="{{index<5}}"></view>
条件判断
//原生js 条件判断
if (time < 10) {
greeting = "Good morning";
} else if (time < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
//vue 条件判断
<div id="app">
<div v-if="type===A">A</div>
<div v-else-if="type===B">B</div>
<div v-else-if="type===C">C</div>
<div v-else>NOT A/B/C </div>
</div>
//小程序 条件判断
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view
<view wx:else> 3 </view>
模板组件
vue组件
<div id="app">
<runoob></runoob>
</div>
<script>
// 注册全局组件
Vue.component('runoob', {
template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
//单文件组件
<div id="app">
<runoob></runoob> //调用组件
</div>
<script>
// 引入和注册组件
export default {
components: {
'runoob': () => import('@/components/runoob/runoob'),
}
}
</script>
小程序模板
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
<template is="msgItem" data="{{...item}}"/>
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
显示与隐藏元素
vue中,使用v-if 和v-show控制元素的显示和隐藏
小程序中,使用wx-if和hidden控制元素的显示和隐藏
事件处理
//vue:使用v-on:event绑定事件,或者使用@event绑定事件,例如:
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click.stop="counter+=1">Add1</button> //阻止事件冒泡
//小程序中,全用bindtap(bind+event),或者catchtap(catch+event)绑定事件,例如:
<button bindtap="noWork">明天不上班</button>
<button catchtap="noWork">明天不上班</button> //阻止事件冒泡