/mini-mvvm

基于 virtual dom 的轻量级 mvvm 库 >_<#@!

Primary LanguageTypeScript

mini-mvvm

npm file size Build Status

A mini mvvm lib with virtual dom - mini-vdom.

基于 virtual dom - mini-vdom 的轻量级 mvvm 库 >_<#@!

适用于 ui 组件的构建依赖或小型项目,如果项目比较复杂,也许一个更加成熟的 mvvm 框架及其生态更适合你 🤠🤠

Installation

npm install mini-mvvm --save

包含了 .d.ts 文件,用起来毫无阻塞 >_<#@!

Live Example

MVVM - 功能演示

Development && Production

npm run dev:mini-mvvm 开发调试

npm run build 生产构建

Ability

  • VNode 基于虚拟 dom: virtual dom - mini-vdom
  • 数据监听
    • datacomputed 变动监听
    • 数组方法监听 push | pop | shift | unshift | splice | sort | reverse
  • computed 计算属性
  • 文本节点 数据绑定,可以是一段表达式
  • attribute 数据绑定
    • 支持绑定 data、computed,支持方法,可以是一段表达式
  • 常用指令
    • m-model 双向绑定。 支持 inputtextareaselect
    • m-if 条件渲染。条件支持 datacomputed、一段表达式
    • m-for 循环。(item,index) in arrayitem in array
  • 事件绑定
    • @click | @mousedown | ... 。可以使用 $event 占位原生事件
  • watch 数据监听,详见下方示例
    • 声明方式
    • api 方式
  • 生命周期
    • created 组件创建成功,可以使用 this 得到 MVVM 的实例
    • beforeMount 将要被插入 dom
    • mounted 组件被添加到 dom,可以使用 this.$el 获取根节点 dom
    • beforeUpdate 组件将要更新
    • updated 组件更新完毕

Example

import MVVM from 'mini-mvvm'; // es module, typescript
// const MVVM from 'mini-mvvm'; // commonjs
// const MVVM = window['MiniMvvm']; // window

new MVVM({
    // 挂载的目标节点的选择器
    // 如果没有 template,就用这个节点作为编译模板
    el: '#app',
    template: `
    <div id="app">
        <div>{{ content }}</div>
    </div>
    `,
    // data
    data() {
        return {
            content: 'this is content.'
        };
    },
    computed: {}, // ...计算属性
    // ...hook,可以使用 this
    created() {
        // 使用api方式去watch
        this.$watch('key', (val, oldVal) => {}, { immediate: true });
    },
    mounted() {}, // ...hook,可以使用 this.$el
    methods: {}, // ...方法
    // ...数据监听
    watch: {
        // 声明方式1:
        watch1(val, oldVal) {},
        // 声明方式2:
        watch2: {
            immediate: true, // 立即执行
            handler(val, oldVal) {}
        }
    }
});

Enjoy it! :D