1.0.13 • Published 5 years ago
mvvm-element v1.0.13
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>