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>