blear.classes.mvvm

1Introduction

var MVVM = require('blear.classes.mvvm');

new MVVM({
    el: '#app',
    data: {
        msg: 'Hello'
    }
});

<div id="app">{{ msg }}</div>

<div [data-mvvm-0] id="app">Hello</div>

所有参数详细参考 VUE 官方文档。

在不进行编译的情况下（vue 官方使用的是 vue-loader 编译实现），就已经实现了 mvvm 组件的 css 组件化。

每一个组件（component）都会添加一个 data-mvvm-\d 的属性，用于控制组件的 css 作用域。

<div id="demo" class="demo"></div>

上述 html 在实例化之后，相关的 id、class 属性会消失，原因是提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。而 MVVM 会在实例化后自动继承这些属性，即上述 html 根元素里的 id、class 会得到原文保留。

MVVM 在实例销毁之后会先进行 vue.$destory()，然后再进行组件样式的移除和元素的复原。这样看起来和一开始没有实例化 MVVM 是一致的。

options.template 可以被构建成 render 函数，需要在 coolie 构建时添加 coolie-mid-vue 中间件。