小程序和vue的区别

最近开发了一个比较完整的小程序项目，打算总结一下，小程序开发和vue开发的代码上的区别

1.小程序的路由写在app.json文件里，vue写在route.js里

 

2.小程序用 src="{{path}}" 绑定标签属性，vue用 :src="path" 绑定标签属性

 

3.小程序用 wx:if="{{lenth>5}}" 来条件判断，vue用 v-if="lenth>5" 来条件判断

 

4.小程序用 wx:for="{{array}}" 来遍历列表，默认数组的当前项的下标变量名为 index，默认数组当前项的变量名为 item；vue用 v-for="(item,index) in array" 来条件遍历列表

 

5.小程序用wx.navigateTo()或wx.rediretTo()跳转页面，vue用this.$router.push()或this.$router.replace()跳转页面

 

6.小程序绑定事件传参这标签里加data-变量名="参数值"的属性，事件回调方法取参时使用e.currentTarget.dataset.变量名的方式获取参数值；vue绑定事件传参直接在标签里的事件回调方法后加参数，如@click="callbackName(参数值)",事件回调方法取参数只要声明function加上参数名，如callbackName:function(变量名){ }，方法体里就可以用变量名直接使用该参数

 

7.小程序用<block></block>配合wx:if或wx:for来渲染包含多个元素的内容，vue用<template></template>配合v-if或v-for来渲染包含多个元素的内容

 

8.小程序里给data的属性赋值需要使用this.setData()方法来更新，不能用'='直接赋值；vue给data里的属性赋值可以直接用'='，如this.a=true

 

9.小程序防止事件冒泡把bindtap改为catchtap就可以了；vue防止事件冒泡用添加事件修饰符来实现，如@click.stop