MVVM

mvvm.js 是一个非常轻量的 mvvm 库（仅 24kb）， mvvm 对 sugar 没有任何依赖，指令系统功能齐全，能满足基本的 mvvm 模式开发需求。

支持的指令列表：

• v-el DOM 元素注册索引
• v-text 文本填充
• v-html 布局填充
• v-show 控制元素显示/隐藏
• v-if 控制元素内容渲染
• v-else v-show, v-if 的 else 板块
• v-model 双向数据绑定
  • text & textarea
  • radio
  • checkbox
  • select
• v-bind 属性绑定
  • class
  • style
• v-on 事件绑定
• v-for 循环列表
• v-pre 跳过编译
• v-cloak 编译到达状态
• v-custom 自定义指令
• v-once 禁用数据绑定指令
• v-hook v-if/v-for 节点更新钩子函数

指令名称采用 v- 的缩写主要是因为 v 是 view 的首字母，代表着视图指令，还有就是，我也是个 Vue 粉 :-) ，虽然指令名称、功能和使用方法都和 Vue 很相似，但是实现的细节有很大不同。

实例化 MVVM

/*
 * <必选>  view      接受一个 DOM 元素，作为编译的目标元素
 * <必选>  model     接受一个对象作为数据模型，字段不能包含*字符（会被解析成乘号）
 * <可选>  computed  接受一个对象作为计算属性的声明，属性对应的必须是一个有返回值的取值函数
 * <可选>  methods   接受一个对象作为 v-on 事件函数的声明
 * <可选>  watches   接受一个对象作为批量 watch 的 callback 函数声明
 * <可选>  watchAll  接受一个函数作为整个 model 变化的回调
 * <可选>  customs   接受一个对象作为自定义指令刷新函数的声明
 * <可选>  hooks     接收一个对象作为 v-if/v-for 节点更新的钩子函数声明
 * <可选>  context   接受一个 v-on 事件、watches 回调函数和 watchAll 的 this 指向的执行上下文，如不指定则为 model
 * <可选>  lazy      接受一个布尔值告诉 MVVM 是否进行手动编译目标元素
 */
let vm = new MVVM({
	view: element,
	model: {
		a: 1,
		title: 'xxdk',
  		items: []
	},
	computed: {
		b: function () {
			// this 指向 model
			return this.a + 1;
		}
	},
	methods: {
		vmClick: function () {
			// this 为 context 字段指定的上下文，未指定则为 model
		}
	},
	watches: {
		// 简单 watch 直接传一个 callback 函数即可
		title: function () {
			// this 为 context 字段指定的上下文，未指定则为 model
		},
		// deep watch 传一个对象指定 handler 和 deep 参数
		items: {
			handler: function (newVal, oldVal, fromDeep) {
				// this 为 context 字段指定的上下文，未指定则为 model
			},
			deep: true
		}
	},
	watchAll: function (param, newVal, oldVal) {
		// this 为 AppEdit 模块本身
		// param.path 为变化值的访问路径
		// param.action 数组操作的参数
	},
	customs: {
		selfdir: function (initOrNewValue, oldVal) {
			// this 指向指令对象, this.el 指向该自定义指令所在的元素节点
		}
	},
	hooks: {
		afterAppend: function (el, index) {
			// 当用在 v-for 时，el 是每一段列表选项，index 是下标
		},
		beforeRemove: function (el, isElse) {
			// 当用在 v-if 时，el 是 if 节点，isElse 是否是 else 板块
		}
	},
	context: this // methods 和 watches 中的回调上下文
});

实例的方法与属性：

vm.$data // 数据模型对象

// 返回整个数据模型（即 vm.$data）保持引用关系
vm.get();
// 返回单个数据，层级用 . 分隔表示
vm.get('title');

// 与 vm.get() 相同，只是返回数据模型的副本，不保持引用关系
vm.getCopy();

// 设置单个 vm 数据
vm.set('title', 'New title');
// 同时设置多个 vm
vm.set({
  'title': 'xxx',
  'items': [...]
});

// 重置单个 vm 为初始状态
vm.reset('title');
// 重置整个 vm 为初始状态
vm.reset();

// 实现对数据的观察，callback 参数返回 [newValue, oldValue, fromDeep, args]
// deep 为 true 时则会观察对象或数组深层的变化，比如 v-for 数组的所有子项的变化
vm.watch(expression, callback, deep);

// 手动挂载编译，当 lazy 为 true 或者后期需要重新编译时调用
vm.mount();

// 销毁函数，销毁数据对象和视图
vm.destroy();

指令的细节参看 MVVM 指令系统