微信小程序之mpvue框架

    mpvue （github 地址请参见）是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

一，框架原理：

（1）mpvue 保留了 vue.runtime 核心方法，无缝继承了 Vue.js 的基础能力；

（2）mpvue-template-compiler 提供了将 vue 的模板语法转换到小程序的 wxml 语法的能力；

（3）修改了 vue 的建构配置，使之构建出符合小程序项目结构的代码格式： json/wxml/wxss/js 文件。

二，生命周期

除了 Vue 本身的生命周期外，mpvue 还兼容了小程序生命周期：

onLoad，监听页面加载

onShow，监听页面显示

onReady，监听页面初次渲染完成

onHide，监听页面隐藏

onUnload，监听页面卸载

onPullDownRefresh，监听用户下拉动作

onReachBottom，页面上拉触底事件的处理函数

onShareAppMessage，用户点击右上角分享

onPageScroll，页面滚动

onTabItemTap, 当前是 tab 页时，点击 tab 时触发 （mpvue 0.0.16 支持）

三，语法

1，class与style绑定：

        为节约性能，我们将 Class 与 Style 的表达式通过 compiler 硬编码到 wxml 中。

（1）class 支持的语法:

当 i 和current数据为真时，结果渲染为：

另外，

data: {classObject: {active:true,'text-danger':false}}

data: {

  classObject: {

    active: true,

    'text-danger': false  }

}

(2),v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

:style

data: {

   index:0

}

2,计算属性：在模板中放入太多的逻辑， 会让模板过重且难以维护，所以会用到计算属性,也用于任何复杂逻辑。计算属性相对于methods，是有缓存处理的，直到重新渲染时才再次调用该方法。

计算属性

二，项目实战

快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目：

全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目

$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖

$ cd my-project

$ npm install

# 启动构建

$ npm run dev

（我习惯使用yarn来替代npm：

yarn

yarn lint

yarn dev）