最近开发了一个比较完整的小程序项目,打算总结一下,小程序开发和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