基于vue的微信小程序开发5分钟上手教程（官方文档转）

使用手册 mpvue 继承自 Vue.js，其技术规范和语法特点与 Vue.js 保持一致。 注：其实就是官方文档，只是习惯看博文学习才直接copy过来的，详见官方文档

本文档适用于有一定 Vue.js 使用经验的开发者。我们默认你已经掌握 Vue.js 技术体系，如果你是新手，你可能需要先熟悉 Vue.js 官方文档。

#五分钟教程 通过 Vue.js 命令行工具 vue-cli，你只需在终端窗口输入几条简单命令，即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目：

接下来，你只需要启动微信开发者工具，引入项目即可预览到你的第一个 mpvue 小程序。

#框架原理

#Vue 实例 支持 官方文档：Vue 实例，同时我们做了一些修改，来适应小程序的独特加载逻辑。

#实例生命周期 同 vue，不同的是我们会在小程序 onReady 后，再去触发 vue mounted 生命周期，详细的 vue 生命周期文档请看生命周期钩子

除了 Vue 本身的生命周期外，mpvue 还兼容了小程序生命周期，这部分生命周期钩子的来源于微信小程序的 Page， 除特殊情况外，不建议使用小程序的生命周期钩子。

app 部分：

page 部分：

用法示例：

注意点：

不要在选项属性或回调上使用箭头函数，比如created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你做预期的 Vue 实例，且 this.a 或 this.myMethod 也会是未定义的。

微信小程序的页面的 query 参数是通过 onLoad 获取的，mpvue 对此进行了优化，直接通过 this.$root.$mp.query 获取相应的参数数据，其调用需要在 onLoad 生命周期触发之后使用，比如 onShow 等，具体生命周期调用顺序，见下图。

#生命周期图示 你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

生命周期的调用关系和顺序图。

#模板语法 几乎全支持 官方文档：模板语法，下面讲下不支持的情况。

#不支持纯-HTML 小程序里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用。

#不支持部分复杂的 JavaScript 渲染表达式 我们会把 template 中的{{}}双花括号的部分，直接编码到 wxml 文件中，由于微信小程序的能力限制(数据绑定)，所以无法支持复杂的 JavaScript 表达式。

目前可以使用的有 + - * % ?: ! == === > < [] .，剩下的还待完善。

#不支持过滤器 渲染部分会转成 wxml ，wxml 不支持过滤器，所以这部分功能不支持。

#计算属性 支持 官方文档：计算属性。

#不支持函数 不支持在 template 内使用 methods 中的函数。

#Class 与 Style 绑定 为节约性能，我们将 Class 与 Style 的表达式通过 compiler 硬编码到 wxml 中，支持语法和转换效果如下：

class 支持的语法:

将分别被转换成: