微信小程序与vue语法的比较

1.事件定义区别

【1】vue事件绑定：

<button @click="dl">登陆</button>

<input type="text" @input="input"/>

vue用@来绑定事件

【2】微信小程序绑定：

<button bindtap="dl">登陆</button>

<input type="text" bindinput="input"/>

微信小程序原声写法前面加bind后面加事件名

2.事件函数传值

【1】vue事件函数传值：

<button @click="dl(index)">登陆</button>

vue传值直接写在函数括号中

【2】微信小程序事件函数传值：

<button bindtap="dl" data-index="{{index}}">登陆</button>

微信小程序传值需要用data-自定义名字={{需要传递的值}}

3.if语句

【1】vue的if语句：

<div v-if="index == 1">1<div>
<div v-else-if="index == 2">2<div>
<div v-else>3<div>

if语句前加 “v-”

【2】微信小程序if语句：

<view wx:if="{{index == 1}}">1<view>
<view wx:elif="{{index == 2}}">2<view>
<view wx:else>3<view>

微信小程序if语句前加 “wx:”，而且判断内容需要用 {{双大括号}} 包起来，第二行的else-if，直接省略成elif

4.关键字引用

【1】vue的关键字引用：

<img :src="src" />

vue中属性名前面加 “:” 或者 v-bind

【2】微信小程序关键字引用：

<image src="{{src}}" />

微信小程序中只需要属性值加“{{}}”包起来就行

5.for列表渲染

【1】vue的for列表渲染：

<block v-for="(item,i) in list" :key="i">
	<div>{{item.text}}</div>
</block >

vue的for语法=(每一项数据名，索引名) in 数据名

【2】微信小程序的for列表渲染：

<block wx:for="{{list}}" wx:data-item="item" wx:data-index="idx" wx:key="idx">
	<div>{{item.text}}</div>
</block >

微信小程序的for里只写数据名， 如果需要修改当前元素的数据名：wx:data-item=“自定义的数据名” 如果需要修改当前元素的索引名：wx:data-index=“自定义的索引名” 默认数据名是item，默认索引名是index

欢迎留言补充！