@fe_korey/mvvm
v2.0.0
A simple mvvm library
0/weekUpdated 3 years agoMITUnpacked: 136.8 KB
Published by Korey
A Simple MVVM Library
---
Introduction
mvvm.js is inspired by the implementation of vue.js, on my own idea to implement the simple mvvm library, it is only for learning and communication. Please do not use it in production environment.
mvvm.js uses proxy for data hijacking, used defineproperty click here.
mvvm.js currently only implements data-binding and view-refresh, and more features are still being updated.
Install
mvvm.js uses node and npm/yarn. Go check them out if you don't have them locally installed.
``bash`
yarn add @fe_korey/mvvm
Usage
both support UMD (Universal Module Definition),ESM (ES6 module),CJS (common JS)，
$3
`html`
{{title}}
$3
`html`
{{title}}
$3
`js
const MVVM = require("../../dist/mvvm.cjs");
const data = {
view: document.getElementById("app"),
model: {
title: "标题",
},
};
new MVVM(data);
`
Refer to DEMO for more usage.
Related Tech
- typescript
- rollup
- jest & codecov
- babel
- prettier
- eslint & stylelint
- action
Npm Scripts
- build: create an all packagedev
- : create a test server that can be hot updatedrelease
- : publish mvvm to npmlint
- : code reviewfix
- : fix code errors and formattest
- : unit testing by jestcodecov
- : test coverage
Documentation
$3
`javascript`
/*
* <必选> view 接受一个 DOM 元素作为编译的目标元素
* <必选> model 接受一个对象作为数据模型
* <可选> methods 接受一个对象作为 v-on 事件函数的声明
* <可选> mounted 接受一个函数作为MVVM编译完成后的回调
*/
new MVVM({
view: el,
model: {
title: "hello mvvm!",
},
methods: {
getIndex: () => {},
},
mounted() {
console.log("主程编译完成,欢迎使用MVVM！");
},
});
$3
List of supported directive
- v-text
- v-class
- v-show
- v-if
- v-style
- v-on
- v-model
- v-for
- v-[other]
#### v-text
- text interpolation, support {{}}
- model type：
- eg:
`html`
The title is {{ title }}
`javascript`
model: {
title: "hello mvvm!";
}
#### v-class
- switch class
- model type：string
- eg:
`html`
`javascript`
model: {
main: "a b";
}
#### v-show
- switch display(dom is not deleted)
- model type：boolean
- eg:
`html`
`javascript`
model: {
show: true;
}
#### v-if
- control dom loading and deleting
- model type：boolean
- eg:
`html`
`javascript`
model: {
show: true;
}
#### v-style
- control dom style
- model type: object
- eg:
`html`
`javascript`
model: {
styleObj: {
color: "red";
}
}
#### v-for
- array list rendering
- directive syntax:
`html`
- model type: array
- eg:
`html`
{{item}}
{{index}}
`javascript`
model: {
list: [1, 2, 3];
}
#### v-on:event
- event binding,event can be any event name, such as click
- model type: Event functions in the attribute,function $event parameter is Event interface
- eg:
`html`
`javascript`
model:{
title: "hello mvvm!"
},
methods: {
getIndex: (e,title) => {
console.log(e,title);
}
}
#### v-model
- two-way binding on form controls
- scope: input[type=text, password, radio, checkbox],select and textarea
##### input[type=text,password] & textarea
- model type: string
- eg:
` {{title}}html`
`javascript`
model: {
title: "title";
}
##### input[type=radio]
- model type: string (value)
- eg:
`html`
我 你
`javascript`
model: {
radio: "";
}
##### input[type=checkbox]
- model type: boolean(single) or array(multiple) (value)
- eg:
`html`
苹果
苹果 橘子
香蕉
`javascript`
model:{
checkboxBool: true,
checkboxArray:['apple','orange']
}
##### select
- model type: string(radio) or array(multiple) (value)
- eg:
`html`
`javascript`
model:{
selected: "apple",
selectedMult: ['apple']
}
#### v-[other]
- render other attributes on the dom node
- model type: string
- eg:
`html`
hello!
`javascript`
model: {
link: "https://www.flqin.com";
}
Render result:
`html``
hello!
Maintainers
License
Copyright (c) 2019-present, keyu (korey) Zhao