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.
mvvm.js uses node and npm/yarn. Go check them out if you don't have them locally installed.
yarn add @fe_korey/mvvmboth support UMD (Universal Module Definition),ESM (ES6 module),CJS (common JS)，
<html>
<script src="dist/mvvm.umd.js"></script>
<body>
<div id="app">
<div>{{title}}</div>
</div>
</body>
<script>
new MVVM({
view: document.getElementById("app"),
model: {
title: "hello mvvm!",
},
mounted() {
console.log("主程编译完成,欢迎使用MVVM！");
},
});
</script>
</html><body>
<div id="app">{{title}}</div>
</body>
<script type="module">
import MVVM from "../../dist/mvvm.esm.js";
const data = {
view: document.getElementById("app"),
model: {
title: "标题",
},
};
new MVVM(data);
</script>const MVVM = require("../../dist/mvvm.cjs");
const data = {
view: document.getElementById("app"),
model: {
title: "标题",
},
};
new MVVM(data);Refer to DEMO for more usage.
- typescript
- rollup
- jest & codecov
- babel
- prettier
- eslint & stylelint
- action
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
/*
* <必选> view 接受一个 DOM 元素作为编译的目标元素
* <必选> model 接受一个对象作为数据模型
* <可选> methods 接受一个对象作为 v-on 事件函数的声明
* <可选> mounted 接受一个函数作为MVVM编译完成后的回调
*/
new MVVM({
view: el,
model: {
title: "hello mvvm!",
},
methods: {
getIndex: () => {},
},
mounted() {
console.log("主程编译完成,欢迎使用MVVM！");
},
});List of supported directive
-
text interpolation, support
{{}} -
model type：
string -
eg:
<h1 v-text="title"></h1> <h1>The title is {{ title }}</h1>
model: { title: "hello mvvm!"; }
-
switch class
-
model type：
string -
eg:
<h1 v-class="main"></h1>
model: { main: "a b"; }
-
switch display(dom is not deleted)
-
model type：
boolean -
eg:
<h1 v-show="show"></h1>
model: { show: true; }
-
control dom loading and deleting
-
model type：
boolean -
eg:
<h1 v-if="show"></h1>
model: { show: true; }
-
control dom style
-
model type:
object -
eg:
<h1 v-style="styleObj"></h1>
model: { styleObj: { color: "red"; } }
-
array list rendering
-
directive syntax:
<p v-for="item in list"></p> <p v-for="item of list"></p> <p v-for="(item,index) in list"></p> <!-- item为数组项，index为数组项的索引 -->
-
model type:
array -
eg:
<div v-for="(item,index) in list"> <div>{{item}}</div> <div>{{index}}</div> </div>
model: { list: [1, 2, 3]; }
-
event binding,
eventcan be any event name, such asclick -
model type: Event functions in the
methodsattribute,function$eventparameter isEvent interface -
eg:
<div v-on:click="getIndex"></div> <div v-on:click="getIndex($event,title)"></div>
model:{ title: "hello mvvm!" }, methods: { getIndex: (e,title) => { console.log(e,title); } }
- two-way binding on form controls
- scope:
input[type=text, password, radio, checkbox],selectandtextarea
-
model type:
string -
eg:
<input type="text" v-model="title" /> <textarea v-model="title" /> <p>{{title}}</p>
model: { title: "title"; }
-
model type:
string(value) -
eg:
<div><input type="radio" value="me" v-model="radio" />我 <input type="radio" value="you" v-model="radio" />你</div>
model: { radio: ""; }
-
model type:
boolean(single) orarray(multiple) (value) -
eg:
<div><input type="checkbox" value="apple" v-model="checkboxBool" />苹果</div> <div> <input type="checkbox" value="apple" v-model="checkboxArray" />苹果 <input type="checkbox" value="orange" v-model="checkboxArray" />橘子 <input type="checkbox" value="banana" v-model="checkboxArray" />香蕉 </div>
model:{ checkboxBool: true, checkboxArray:['apple','orange'] }
-
model type:
string(radio) orarray(multiple) (value) -
eg:
<select v-model="selected"> <option value="apple">苹果</option> <option value="orange">橘子</option> <option value="banana">香蕉</option> </select> <select v-model="selectedMult" multiple> <option value="apple">苹果</option> <option value="orange">橘子</option> <option value="banana">香蕉</option> </select>
model:{ selected: "apple", selectedMult: ['apple'] }
-
render other attributes on the dom node
-
model type:
string -
eg:
<div v-link="link">hello!</div>
model: { link: "https://www.flqin.com"; }
Render result:
<div link="https://www.flqin.com">hello!</div>
Copyright (c) 2019-present, keyu (korey) Zhao