mvvm-element

Native component base class based on web components and Proxy: MvvmElement

Usage

# install 
$ npm install mvvm-element

直接作用于普通dom元素

<!-- html-->
 
<div id="app">
  <time>{{ time }}</time>
</div>

// javascript
 
import mvvm from 'mvvm-element';
 
mvvm({
  el: document.querySelector('#app'),
  data: {
    time: new Date().toLocaleTimeString()
  },
  // setup will only be executed once
  setup(ctx) {
    updateClock(ctx);
 
    return {
      // event handler
      handleClick() {
        // do sth
      }
    };
  }
});
 
function updateClock(state) {
  setTimeout(() => {
    state.time = new Date().toLocaleTimeString();
 
    updateClock(state);
  }, 1000);
}
 

编写原生组件（web components）

如果不了解web components 狠狠的戳这里

一个简单的组件: HelloWorld

// src/components/HelloWorld.js
 
import { MvvmElement } from 'mvvm-element';
 
const template = `
  <div>{{ message }}</div>
`;
 
export default class HelloWorld extends MvvmElement {
  constructor() {
    super({
      template,
      state: {
        message: "hello world!"
      }
    });
  }
}

如何使用组件

// src/index.js
 
import { register } from 'mvvm-element';
import HelloWorld from './components/HelloWorld.js';
 
register('wlxm-hello-world', HelloWorld);
 

<!-- index.html -->
 
<wlxm-hello-world></wlxm-hello-world>

双向绑定

<input data-model="message" />
<p>{{ message }}</p>

事件绑定

<button data-click="handleClick"></button>

属性绑定

<div data-bind:style="styles"></div>

循环

<ul>
  <li data-for="item in list">{{ item }}</li>
</ul>