Vue与微信小程序开发时的区别
一，生命周期
vue：
跳转页面时，钩子函数都会被重新出发一次，每次进入页面所有得钩子函数都会被触发一次
小程序:
onload() 一个页面只会被加载一次，可以在 onl oad 中获取打开当前页面所调用的 query 参数。
onShow（）: 每次打开页面都会调用一次。
二 、数据绑定
vue: 动态绑定属性时，在变量前面加冒号 :
<img :src="imgUrl">
小程序：不加冒号，给变量加{{}}
<img src="{{imgUrl}}">
三、事件的绑定与传值
--vue @ v-on
<button @click="increment">+1</button>
-- 小程序 bindtap
<buuton bindtap="increment">+1</button>
事件处理
- vue中阻止事件冒泡 用@click.stop
- 小程序用 catchtap=‘’绑定事件，catchtap阻止事件冒泡。
四、绑定事件的传参
--vue
<button @click="increment(1)">+1</button>
//小程序 需要将参数作为属性值，绑定到元素上的data-属性上，然后在方法中，通过e.currentTarget.dataset.*的方式获取
<buuton bindtap="increment" data-num="1">+1</button>
// vue
methods:{
increment(num) {
console.log(num)
}
}
// 小程序
increment(e) {
let num = e.currentTarget.dateset.num
}
五、数据的绑定
vue: 使用v-mode指令来实现表单元素和数据的双向绑定,当表单元素或data中的绑定值发生改变时，另一端也会随之改变 其本质是两种操作,v-bind绑定一个value属性,v-on指令给当前元素绑定input事件
小程序: 没有vue当中的双向绑定功能,只能在表单中绑定事件，当发生改变时，触发事件，然后在方法中通过this.setData({key:value})，来赋值给data中的属性值
取值:
- 在vue中直接this.idcard取值
- 小程序中需要 this.data.password取值
-- vue
<input v-mode="idcard" placeholder="请输入帐号" />
-- 小程序
<input class="weui-input" password="true" value="{{password}}" placeholder="请输入密码" bindinput="passwordInput" />
// vue
data:{
idcard: ''
}
// 小程序
data:{
password: ''
},
passwordInput: function (e) {
this.setData({
password: e.detail.value
})
},
六、动态绑定样式
vue：
<div :class="{{active: isActive}}">样式</div>
<div :class="[activeClass, errorClass]">样式</div>
<div :class="[isActive ? activeClass : '', errorClass]">样式</div>
<div :class="[{ active: isActive }, errorClass]">样式</div>
小程序：
<view class="{{active==isActive?'active':''}}"> 样式</view>
<view class="choose {{num==1?'active':''}}" data-num="1" bindtap="itemClick">样式</view>
七，数据显示隐藏
vue中，使用 v-if 和 v-show控制元素的显示和隐藏。
小程序中，使用 wx-if和 hidden控制元素的显示和隐藏。
八、循环
-- vue
<div v-for="(item, index) in list" :key="this">
<span>{{item}}</span>
</div>
-- 小程序
<view wx:for="{{lists}}" wx:key="this" wx:for-item="item" wx:for-index="index">
{{item}}
</view>
九、父子组件通信
vue
1.子组件的使用
在vue中，需要：
- 编写子组件
- 在需要使用的父组件中通过import引入
- 在vue的components中注册
- 在模板中使用
//子组件 bar.vue
<template>
<div class="search-box">
<div @click="say" :title="title" class="icon-dismiss"></div>
</div>
</template>
<script>
export default{
props:{
title:{
type:String,
default:''
}
}
},
methods:{
say(){
console.log('明天不上班');
this.$emit('helloWorld')
}
}
</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>
小程序：
- 编写子组件
- 在子组件的json文件中，将该文件声明为组件
{
"component": true
}
- 在需要引入的父组件的json文件中，在usingComponents填写引入组件的组件名以及路径
"usingComponents": {
"tab-bar": "../../components/tabBar/tabBar"
}
- 在父组件中，直接引入即可
<tab-bar currentpage="index"></tab-bar>