最近開發了一個比較完整的小程序項目,打算總結一下,小程序開發和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