一、书写格式上
1、绑定事件
Vue：
<div v-on:click='onClickme'>点击</div>
小程序：
<view bindtap='onClickme'>点击</view>
Vue是通过v-on：事件名字='回调函数名'。
小程序以bin或catch开头，后面跟着事件类型，例如bindtap、catchtouchstart。自基础库版本1.5.0起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。同时bind和catch·前还可以加上capture-来表示捕获阶段。bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
2、标签中的属性及文本内容的写法
Vue:
- 标签中的属性（HTML的特性）：“指令：属性名字=‘绑定的数据变量’ ”，v-bind：title='message'，v-bind和v-on可以分别缩写:空（省去）和@
例如：<span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span>
v-bind是一条指令，表示绑定属性，还有v-once：只执行一次，v-html=“rawhtml”：显示html
完整示例：
//html
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
//js
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
- 只有文本绑定的数据变量才用“{{数据变量}}”，其实双大括号就是将数据解释为普通文本。
//html
<div id="app-7">
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
//js
var app=new Vue({
el:'#app-7',
data:{
rawHtml:'<span style="color:red;">红色</span>'
}
})
输出：
小程序
所有的数据绑定统统用大括号包含，如果是组件中的数据绑定需要在大括号外加引号，文本不需要加引号。
<view wx:for="{{imgUrls}}" wx:key='*this'>
<image src='{{item.url}}' class='slide-image' data-swiperId='{{index}}'></image>
<text class='actor-name'>{{item.name}}</text>
</view>
3、小程序中的模板和vue中的组件
小程序
定义模板：<template name="模板名字">中间很多想要的wxml</template>，该模板也是.wxml文件
<template name="movieTemplate">
<view class='movie-container' bindtap='onMovieDetail' data-id='{{movieId}}'>
<view class='movie'>
<image src="{{imageUrl}}" class="movie-img"></image>
<text>{{title}}</text>
</view>
</view>
</template>
使用模板：只需要在文件顶部引用<import src='相对路径或绝对路径/xx.wxml/>' ,正文中添加 <template is="模板名字"/>
<import src='./movie/movieTemplate.wxml' />
<template is="moreMovieTemplate" data="{{moreMovieList}}"/>
Vue中的组件
在js中定义，例如
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
应用组件，在html中引入
<my-component class="baz boo"></my-component>
4、包含if else块
Vue使用<template></template>来包含，小程序使用<block></block>。
<template>和<block>均不显示
Vue
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
小程序
<button wx:if="{{!hasUserInfo&&canIUse}}" open-type='getUserInfo' bindgetuserinfo='getUserInfo'>获取头像昵称</button>
<block wx:else>
<image class='userinfo-avatar' src='{{userInfo.avatarUrl}}' background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
还有一个小的重要区别，vue的写法都是v-xx=“xxx”，小程序是wx:xx="xxx"
5、关于属性
在小程序中沿用HTML的属性，属性=“{{变量或js表达式}}|字符串”。如果属性值是静态的，就直接用字符串表示，如果属性值是动态变化的，那么就直接让属性=变化的js表达式或变量。
例如：
//src是静态
<image src='../../../img/share1.png' bindtap='onShareTap'></image>
//src动态，有变量值决定，下面显示的是一个js表达式
<image src='{{isPlayMusic?"../../../img/start.png":"../../../img/music.png"}}' class='music-img' catchtap='onMusicTap'></image>
而Vue中，如果属性是动态变化的话，那么就需要借助v-bind指令，来帮顶属性，让属性和等号后面的变量或js表达式结合在一起
//url变量
<a v-bind:href="url">打开连接</a>
//js表达式
<a v-bind:href="url+'baidu.com'">打开连接</a>
*共同点：等号后面绑定的变量或者js表达式，均在data中初始化定义，对于js表达式，可以直接在等号后面写
