小程序：uniapp开发和原生开发语法区别

 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。所以使用uni-app开发的本质还是使用Vue，本文主要比较的是Vue和小程序原生开发的区别。

1.页面布局模板。

Vue：模板只有一个根标签

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

小程序原生：wxml可以多个并列根标签

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

 2.根据条件动态添加class 

Vue:

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

小程序原生：

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

3.数组循环

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>
    // 事件函数和onload，data同级的,直接定义
     handleClick(event){
         // 参数
         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>