Nighttime Peanut Migrations

    @fe_korey/mvvm
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.0-rc.3 • Public • Published

    GitHub last commit NPM GitHub file size in bytes npm (scoped) Actions Status


    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.

    mvvm.js

    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

    • 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

    Copyright (c) 2019-present, keyu (korey) Zhao

    Install

    npm i @fe_korey/mvvm

    DownloadsWeekly Downloads

    62

    Version

    3.0.0-rc.3

    License

    MIT

    Unpacked Size

    413 kB

    Total Files

    60

    Last publish

    Collaborators

    • avatar