微信小程序语法与Vue语法的区别

1. 在小程序元素属性绑定值时，使用{{}}语法绑定变量

//vue
<img :src="imgSrc"></img>
//小程序
<image src="{{imgSrc}}"></img>

2. 声明方法时,不用methods中声明，直接在data同级下声明函数

3. 在函数内修改data中的值

//vue
addCount(){
   this.count++
}
//小程序
addCount(){
   this.setData({
    count:this.data.count+1
  })
},

4. 事件传参

//vue
<button :click="addCount(1)">按钮</button>
//小程序
<button bindTap="addCount" data-i="{{1}}>按钮</button>
//小程序不能直接在函数中传参，需要通过data-*的方式传参
//i为addCount的参数名字，1为i的值  如果不使用{{}}包裹那么它的值为字符串1
//在方法中通过event.target.dataset.参数名  获取值

5. 条件判断

//条件判断 相当于vue中的v-if
<view wx:if="{{type==1}}">男</view>
<view wx:elif="{{type==2}}">女</view>
<view wx:else>保密</view>
//当需要一次性渲染多个元素时，可以使用block将这些元素包裹，
//block只起到包裹的作用，不会在页面上渲染

// 相当于vue中的v-show 
<view hidden="{{flag}}">hidden</view>
// hidden:none/block;

6. 循环

// 1. 默认
<view wx:for="{{arr}}">
索引：{{index}}--item：{{item}}
</view>
// 2. 手动指定index/item的属性名,通过wx:for-index、 wx:for-item
<view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="tt">
索引：{{idx}}--item：{{tt}}
</view>
// 3. wx:key提高渲染效率