正在电脑前敲代码的你知道今天是什么日子,1024程序员节,像我这这种前端小白也来凑凑热闹,近期没有怎么学习,事情比较多,除了正常的上班外,还有一些别的事情,比如让自己的肚子感受一下美味,让自己的脑子进一下水,哈哈哈反正就是没学习,没学习啊没学习,满满的负罪感,愧疚感,觉得对不起自己。因为不能让脑子太饱,保持饥饿,才能学习。用了小程序发现和Vue极其相似,那就来区别一下。、
1.生命周期 (话不多说,上来先po图)
-
Vue生命周期
-
小程序生命周期
从上边可以看得出,小程序的钩子函数要简单的很多
Vue 的钩子函数在跳转的新的页面时,钩子函数都会触发,小程序的钩子函数,页面跳转时不同的跳转方式,触发的钩子并不相同。
- onLoad: 页面加载
- 一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数。
- onShow: 页面显示,每次打开页面都会调用一次。
- onReady: 页面初次渲染完成,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
- onHide: 页面隐藏,当navigateTo或底部tab切换时调用。
- onUnload: 页面卸载,当redirectTo或navigateBack的时候调用。
数据请求
在页面加载请求数据时,两者钩子使用有些类似。
- vue一般会在created或者mounted中请求数据,
- 小程序在会在onLoad或者onShow中请求数据。
2.数据绑定
- VUE:vue动态绑定一个变量的值为元素的某个属性的时候,会在变量前面加上冒号:,例:
<img :src="{{imgSrc}}" >
- 小程序:绑定某个变量的值为元素属性时,会用两个大括号括起来,如果不加括号,为被认为是字符串。例:
<image src="{{imgSrc}}"></image>
3.列表渲染
- vue
<ul id="demo">
<li v-for="item in msg">
{{ item.message }}
</li>
</ul>
<script>
var app = new Vue({
el:'#demo',
data:{
msg: [
{ message: '商品列表1' },
{ message: '商品列表2' }
]
}
})
</script>
- 小程序
<text wx:for="{{item}}">{{item}}</text>
<!-- js文件里边 -->
Page({
data: {
msg: [
{ message: '商品列表1' },
{ message: '商品列表21'}
]
}
})
4.显示与隐藏
-
vue中,使用v-if 和v-show控制元素的显示和隐藏
-
小程序中,使用wx-if和hidden控制元素的显示和隐藏
5.事件处理
-
vue中使用v-on:event绑定事件,或者使用@event绑定事件
-
小程序中使用bindtap(bind+event),或者catchtap(catch+event)绑定事件,
6.双向数据绑定
a、设置值
- 在vue中,只需要再表单元素上加上v-model,然后再绑定data中对应的一个值,当表单元素内容发生变化时,data中对应的值也会相应改变,这是vue非常nice的一点(对比完可以发现 当页面表单元素很多的时候,更改值就是一件头疼的事。vue的v-model简直爽的不要不要的。)
<div id="app">
<input v-model="reason" class='reason'/>
</div>
<script>
new Vue({
el:'.app',
data:{
reason:''
}
})
</script>
- 小程序却没有这个功能,它只能通过事件触发,当表单发生变化时,触发表单的绑定方法,然后在这个方法中,通过this.setData({key:value})的形式将表单中值赋给data
<input bindinput="bindReason" class='reason' value='{{reason}}' name="reason" />
<!-- js文件里边 -->
Page({
data:{
reason:''
},
bindReason(e) {
this.setData({
reason: e.detail.value
})
}
})
b、取值
-
vue中,通过this.reason取值
-
小程序中,通过this.data.reason取值
7.绑定事件进行传参
- 在vue中,绑定事件传参挺简单,只需要在触发事件的方法中,把需要传递的数据作为形参传入就可以了
<button class="btn" @click="say('今天1024节,过节不上班')"></button>
<script>
new Vue({
el:'.btn',
methods:{
say(msg){
consloe.log(msg)
}
}
})
</script>
- 在小程序中,不能直接在绑定事件的方法中传入参数,需要将参数作为属性值,绑定到元素上的data-属性上,然后在方法中,通过e.currentTarget.dataset.*的方式获取,从而完成参数的传递,现在一想到当时做项目传参传的就头疼
<view class='tr' bindtap='toApprove' data-id="{{id}}"></view>
<!-- js文件里边 -->
Page({
data:{
id:0
},
toApprove(e) {
let id = e.currentTarget.dataset.id;
this.setData({
id: id
})
}
})
8.子组件及父子组件通信
a、子组件使用
- vue中需要以下几步 1.准备子组件 2.在需要使用的父组件中通过import引入 3.在父组件vue的components中注册 4.在模板中使用
<!-- 子组件 bar.vue -->
<template>
<div class="box">
<div @click="write" :title="title" class="icon-dismiss"></div>
</div>
</template>
<script>
export default{
props:{
title:String,
default:''
},
methods:{
write(){
console.log('过节不上班');
this.$emit('今天1024')
}
}
}
</script>
<!-- 父组件 foo.vue-->
<template>
<div class="container">
<bar :title="title" @helloWorld="helloWorld"></bar>
</div>
</template>
<script>
import Bar from './bar.vue'
export default{
data:{
title:"我是标题"
},
methods:{
helloWorld(){
console.log('我接收到子组件传递的事件了')
}
},
components:{
Bar
}
}
</script>
- 小程序中
<!-- 子组件 -->
<!--components/tabBar/child.wxml-->
<view class='tabbar-wrapper'>
<view class='left-bar {{currentpage==="index"?"active":""}}' bindtap='jumpToIndex'>
<text class='iconfont icon-shouye'></text>
<view>首页</view>
</view>
<view class='right-bar {{currentpage==="setting"?"active":""}}' bindtap='jumpToSetting'>
<text class='iconfont icon-shezhi'></text>
<view>设置</view>
</view>
</view>
在子组件的json文件中,将该文件声明为组件
{"component": true}
在父组件中,直接引入即可
<tab-bar currentpage="index"></tab-bar>
b、父子组件通信
- vue中父组件向子组件传递数据,只需要在子组件通过v-bind传入一个值,在子组件中,通过props接收,即可完成数据的传递
- 子组件向父组件通信可以通过this.$emit将方法和数据传递给父组件。
<!-- 父组件 foo.vue -->
<template>
<div class="container">
<bar :title="title"></bar>
</div>
</template>
<script>
import Bar from './bar.vue'
export default{
data:{
title:"我是标题"
},
components:{
Bar
}
</script>
// 子组件bar.vue
<template>
<div class="box">
<div :title="title" ></div>
</div>
</template>
<script>
export default{
props:{
title:{
type:String,
default:''
}
}
}
</script>
- 微信小程序 父组件向子组件通信,但小程序没有通过v-bind,而是直接将值赋值给一个变量
<tab-bar currentpage="index"></tab-bar>
<!-- index就是要向子组件传递的值 -->
在子组件properties中,接收传递的值
properties: {
currentpage: {
type: String, <!--类型(必填) -->
value: 'index' <!-- 属性初始值(可选) -->
}
}