原生微信小程序和Vue的语法区别

前言：在原生微信小程序的学习中，发现很多与Vue不同的地方，容易混淆。故在此记录总结碰到的一部分；当前还处于学习阶段，只是沧海一粟，后续如在实际工作中应用到，会继续补充。

核心点	原生微信小程序	Vue.js
data属性	在父组件js文件中，data属性是一个object； 引用data中的属性时要通过this.data.xx的方式； 设置修改data中的属性时要通过this.setData({ })的方式	在vue中，因为涉及到组件间的引用与实例的创建，所以必须通过函数的形式，内部返回一个对象； 引用及修改data中的属性时直接通过this.xx的方式
父子组件间的通信	父传子：给子组件绑定data中的属性时，不需要使用v-bind的方式，直接命名即可；在子组件中，props中设置默认值时使用value:xx 子传父：this.trigerEvent(“myevent”,myEventDetail,myEventOption) 父组件引用子组件：在.json文件中使用“usingComponents":{}”	父传子：v-bind绑定； 子传父：this.emit(“event”,参数) 父组件引用子组件：
事件内参数传递	使用data-xxx的方式，这样当触发点击事件时，event中就有该属性了，一般为e.currentTarger.xxx	v-on绑定事件时直接传递参数
通配符	CSS定义样式时不支持	支持
button组件	默认块元素	默认行内块元素
绑定事件	bind+事件名	@事件名
页面跳转路由	API： wx.navigateTo()–保留当前页面，可回退 wx.redirectTo() --不保留，不能回退 wx.switchTab() --可跳转至tabBar页面	vue-router
生命周期	小程序应用App实例生命周期：onLaunch() onShow() onHide() 小程序页面Page实例生命周期: onLoad() onShow() onReady() onHide() onUnload() onPullDownRefresh() onReahBottom() onShareAppMessage() onPageScroll() onTabItemTap()	beforeCreate() created() beforeMount() mounted() beforeUpdate() updated() beforeDestroy() destroyed()