mpvue 文档摘要

安装步骤

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

用微信开发者工具打开dist文件夹即可

实例的生命周期

模板语法

1、小程序里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用
2、不支持部分复杂的 JavaScript 渲染表达式
目前使用的有+ - * % ?: ! == === > < [] .

<!-- 这种就不支持，建议写 computed -->
<p>{{ message.split('').reverse().join('') }}</p>

<!-- 但写在 @event 里面的表达式是都支持的，因为这部分的计算放在了 vdom 里面 -->
<ul>
    <li v-for="item in list">
        <div @click="clickHandle(item, index, $event)">{{ item.value }}</p>
    </li>
</ul>

3、不支持过滤器
4、支持计算属性（computed）
5、不支持函数---不支持在 template 内使用 methods 中的函数。
6、Class 与 Style 绑定(不支持 classObject 和 styleObject 语法)
class 支持的语法:

<p :class="{ active: isActive }">111</p>
<p class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</p>
<p class="static" :class="[activeClass, errorClass]">333</p>
<p class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</p>
<p class="static" v-bind:class="[{ active: isActive }, errorClass]">555</p>

style 支持的语法:

<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</p>
<p v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</p>

7、暂不支持在组件上使用 Class 与 Style 绑定

渲染

条件渲染、列表渲染都支持
只是需要注意一点，嵌套列表渲染，必须指定不同的索引！

事件处理器（几乎全支持）

/ 事件映射表，左侧为 WEB 事件，右侧为 小程序 对应事件
{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap',
    input: 'input',
    change: 'change',
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'
}

表单控件绑定

建议开发过程中直接使用 微信小程序：表单组件

select 组件用 picker 组件进行代替

表单元素 radio 用 radio-group 组件进行代替

组件

vue组件
有且只能使用单文件组件（.vue 组件）的形式进行支持
不支持列表：

• 暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例：<card class="class-name"> </card> 样式是不会生效的)，因为编译到 wxml，小程序不会生成节点，建议写在内部顶级元素上。
• Slot（scoped 暂时还没做支持）
• 动态组件
• 异步组件
• inline-template
• X-Templates
• keep-alive
• transition
• class
• style

小程序组件
mpvue 可以支持小程序的原生组件，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"