一、书写格式上

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>//jsvar 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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{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表达式，可以直接在等号后面写

作者：fenerchen
链接：https://www.jianshu.com/p/0d8723704531