README
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.
yarn add @fe_korey/mvvm
Usage
both support UMD
(Universal Module Definition),ESM
(ES6 module),CJS
(common JS),
UMD
<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>
ESM
<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>
CJS
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
Instantiate MVVM
/*
* <必选> view 接受一个 DOM 元素作为编译的目标元素
* <必选> model 接受一个对象作为数据模型
* <可选> methods 接受一个对象作为 v-on 事件函数的声明
* <可选> mounted 接受一个函数作为MVVM编译完成后的回调
*/
new MVVM({
view: el,
model: {
title: "hello mvvm!",
},
methods: {
getIndex: () => {},
},
mounted() {
console.log("主程编译完成,欢迎使用MVVM!");
},
});
Directive System
List of supported directive
v-text
text interpolation, support
{{}}
model type:
string
eg:
<h1 v-text="title"></h1> <h1>The title is {{ title }}</h1>
model: { title: "hello mvvm!"; }
v-class
switch class
model type:
string
eg:
<h1 v-class="main"></h1>
model: { main: "a b"; }
v-show
switch display(dom is not deleted)
model type:
boolean
eg:
<h1 v-show="show"></h1>
model: { show: true; }
v-if
control dom loading and deleting
model type:
boolean
eg:
<h1 v-if="show"></h1>
model: { show: true; }
v-style
control dom style
model type:
object
eg:
<h1 v-style="styleObj"></h1>
model: { styleObj: { color: "red"; } }
v-for
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]; }
v-on:event
event binding,
event
can be any event name, such asclick
model type: Event functions in the
methods
attribute,function$event
parameter 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); } }
v-model
- two-way binding on form controls
- scope:
input[type=text, password, radio, checkbox]
,select
andtextarea
input[type=text,password] & textarea
model type:
string
eg:
<input type="text" v-model="title" /> <textarea v-model="title" /> <p>{{title}}</p>
model: { title: "title"; }
input[type=radio]
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: ""; }
input[type=checkbox]
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'] }
select
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'] }
v-[other]
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>
Maintainers
License
Copyright (c) 2019-present, keyu (korey) Zhao