vue与微信小程序的写法对比

好记性不如烂笔头，学过的知识不复盘，不经常使用就会记不清楚。之前工作中一直用的vue，遇到新的项目需要做微信小程序，发现有很多相似之处，容易混淆；做个笔记对比着记更容易一些

第一、指令

• vue中都是"v-"开头，例如v-for，v-if，v-html
• 小程序中都是“wx：”开头，例如wx:for,wx:if

第二、条件和列表渲染区别

• vue中写法：v-if=“”，v-else-if=“”，v-else=“”，v-show,v-for=“(item,index) in list”
• 小程序中：wx:if=“”,wx:elif=“”,wx:else=“”,hidden,wx:for=“{ {list}}”,wx:for-item=“item”,wx:for-index=“index”

第三、事件绑定的方式不同

• vue中事件绑定：@click=“”,on:click=“”，@change=“”,on:change=“”，以@开头或者’on:’
• 小程序中事件绑定：bindtap=“”，bindinput=“”,bindchange=‘’，无法在小程序中的事件直接传递参数
  而是通过自定义属性data-来传递参数，然后在事件源e中拿到这个参数

//错误
<button bindtap="handlePlue(1)"></button>
<button bindtap="handlePlue(-1)"></button>

//正确
<button bindtap="handlePlue" data-operation="{
    {1}}">+</button>
<button bindtap="handlePlue" data-operation="{
    {-1}}">_</button>

  handlePlue(e){
   
    console.log(e)
    const opera = e.currentTarget.dataset.operation
    this.setData({
   
      num:this.data.num +opera
    })
  },

第四、数据绑定

-vue 使用v-model进行双向数据绑定

<input v-model="sss">

-小程序中使用setData(在自定义组件中触发双向绑定更新只能用setData),或者简易的数据双向绑定`

<input model:value="{
    {sss}}">`

<input type="text" bindinput="handleInput"/>
<view>{
  {num}}</view>`  

handleInput(e){
    console.log(e)
    this.setData({
      num:e.detail.value
    })

第五、wxss的单位rpx和px关系

• px换算成rpx 750/屏幕尺寸
• rpx换算成px 屏幕尺寸/750

第六、页面中引入css

• vue中scope参数可选

<style src="./style.css" />

• 小程序中使用@import相对路径导入

@import ‘./style.css’；

第七、生命周期

• vue的生命周期
  
• 小程序的生命周期
  1.页面onResize()生命周期，可在页面.json文件中全局app.json文件中配置,横屏
  2.页面onTabItemTap()生命周期，只能在tabBar的页面上使用并且只能是点击自己的tab item时触发

{
	"pageOrientation":"auto"
}

3.组件的生命周期

第八 、组件间的通信方式

• vue
  1.父组件给子组件传值，在子组件props中定义，在父组件中传入值

//子组件
props: {
   
    tableData: {
   
      default: () => [],
    },
    }

//父组件
<toolbar :tableData="tableData"  /