@fe_korey/mvvm v3.0.0-rc.3
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
inputtype=text,password & textarea
- model type:
string
eg:
<input type="text" v-model="title" /> <textarea v-model="title" /> <p>{{title}}</p>
model: { title: "title"; }
inputtype=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: ""; }
inputtype=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
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago