uni-app 是一個使用 Vue.js 開發(fā)所有前端應用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平臺。所以使用uni-app開發(fā)的本質還是使用Vue，本文主要比較的是Vue和小程序原生開發(fā)的區(qÅ«)別。

1.頁面布局模板。

Vue：模板只有一個根標簽

    <template>
      <view></view>
    </template>

小程序原生：wxml可以多個并列根標簽

      <view></view>
      <view></view>

 2、根據(jù)條件動態(tài)添加class 

Vue:

    <view :class="{active: current=== index}"></view>

小程序原生：

    <view class="{{current === index ? 'current' : '' }}"></view>

3、數(shù)組循環(huán)

Vue:

    <view v-for="(item, index) in []" :key="index"></view>

小程序原生：

    <view wx:for="[]" wx:key="index"></view>
    // 默認指定item為當前項, index是索引，wx:for-item，wx:for-index修改變量名
    <view wx:for="[]" wx:key="index" wx:for-item="subItem" wx:for-index="subIndex"></view>

4、點擊事件綁定

Vue:

    <view @click="handleClick(index)"></view>
    // vue的js代碼
    methods: {
        handleClick(index){}
    }

小程序原生：

    <view bindtap="handleClick" data-index="index"></view>
    // 事件函數(shù)和onload，data同級的,直接定義
     handleClick(event){
         // 參數(shù)
         event.currentTarget.dataset.index
     }

5、賦值格式

Vue:

     this.list = ['1','2','3'];

小程序原生：

    // 使用setData方法修改
    this.setData({
      list:['1','2','3']
    })

6、點擊事件傳值

Vue:

    <button @click="btnClick(123)">
    </button>

小程序原生：

    <button bindtap="benClick" data-number="123">
    </button>