@fe_korey/mvvm

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 package
dev: create a test server that can be hot updated
release: publish mvvm to npm
lint: code review
fix: fix code errors and format
test: unit testing by jest
codecov: 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
v-class
v-show
v-if
v-style
v-on
v-model
v-for
v-[other]

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 as click
model type: Event functions in the methods attribute,function $event parameter is Event 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 and textarea

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) or array(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) or array(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

@korey

License

MIT

@fe_korey/mvvm

A Simple MVVM Library

Introduction

Install

Usage

UMD

ESM

CJS

Related Tech

Npm Scripts

Documentation

Instantiate MVVM

Directive System

v-text

v-class

v-show

v-if

v-style

v-for

v-on:event

v-model

input[type=text,password] & textarea

input[type=radio]

input[type=checkbox]

select

v-[other]

Maintainers

License

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads