{"id":16610984,"url":"https://github.com/shalldie/mini-mvvm","last_synced_at":"2025-03-16T21:31:01.866Z","repository":{"id":35006447,"uuid":"163065374","full_name":"shalldie/mini-mvvm","owner":"shalldie","description":"基于 virtual dom 的轻量级 mvvm 库 \u003e_\u003c#@!","archived":false,"fork":false,"pushed_at":"2023-03-04T03:03:24.000Z","size":1297,"stargazers_count":80,"open_issues_count":6,"forks_count":6,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-27T14:32:27.799Z","etag":null,"topics":["mini-mvvm","mini-vdom","mvvm","virtual-dom","vnode"],"latest_commit_sha":null,"homepage":"https://nosaid.com/article/virtual-dom","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shalldie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-25T08:53:06.000Z","updated_at":"2025-01-16T08:41:07.000Z","dependencies_parsed_at":"2025-01-02T01:45:43.081Z","dependency_job_id":null,"html_url":"https://github.com/shalldie/mini-mvvm","commit_stats":null,"previous_names":["shalldie/mvvm"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shalldie%2Fmini-mvvm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shalldie%2Fmini-mvvm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shalldie%2Fmini-mvvm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shalldie%2Fmini-mvvm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shalldie","download_url":"https://codeload.github.com/shalldie/mini-mvvm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243222205,"owners_count":20256226,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mini-mvvm","mini-vdom","mvvm","virtual-dom","vnode"],"created_at":"2024-10-12T01:34:16.148Z","updated_at":"2025-03-16T21:31:01.444Z","avatar_url":"https://github.com/shalldie.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mini-mvvm\n\n[![npm](https://img.shields.io/npm/v/mini-mvvm?logo=npm\u0026style=flat-square)](https://www.npmjs.com/package/mini-mvvm) \n[![file size](https://img.shields.io/github/size/shalldie/mini-mvvm/dist/mini-mvvm.js?style=flat-square)](https://www.npmjs.com/package/mini-mvvm) \n[![Build Status](https://img.shields.io/github/workflow/status/shalldie/mini-mvvm/ci?label=build\u0026logo=github\u0026style=flat-square)](https://github.com/shalldie/mini-mvvm/actions)\n\nA mini mvvm lib with [virtual dom - mini-vdom](https://github.com/shalldie/mini-mvvm/tree/master/packages/mini-vdom).\n\n基于 [virtual dom - mini-vdom](https://github.com/shalldie/mini-mvvm/tree/master/packages/mini-vdom) 的轻量级 mvvm 库 \u003e\\_\u003c#@!\n\n适用于 ui 组件的构建依赖或小型项目，如果项目比较复杂，也许一个更加成熟的 mvvm 框架及其生态更适合你 🤠🤠\n\n## Installation\n\n    npm install mini-mvvm --save\n\n包含了 `.d.ts` 文件，用起来毫无阻塞 \u003e\\_\u003c#@!\n\n## Live Example\n\n[MVVM - 功能演示](https://shalldie.github.io/demos/mini-mvvm/)\n\n## Development \u0026\u0026 Production\n\n    npm run dev:mini-mvvm 开发调试\n\n    npm run build 生产构建\n\n## Ability\n\n-   [x] VNode 基于虚拟 dom： [virtual dom - mini-vdom](https://github.com/shalldie/mini-mvvm/tree/master/packages/mini-vdom)\n-   [x] 数据监听\n    -   [x] `data`、`computed` 变动监听\n    -   [x] 数组方法监听 `push` | `pop` | `shift` | `unshift` | `splice` | `sort` | `reverse`\n-   [x] `computed` 计算属性\n-   [x] `文本节点` 数据绑定，可以是一段表达式\n-   [x] `attribute` 数据绑定\n    -   [x] 支持绑定 data、computed，支持方法，可以是一段表达式\n-   [x] 常用指令\n    -   [x] `m-model` 双向绑定。 支持 `input`、`textarea`、`select`\n    -   [x] `m-if` 条件渲染。条件支持 `data`、`computed`、一段表达式\n    -   [x] `m-for` 循环。`(item,index) in array`、`item in array`\n-   [x] 事件绑定\n    -   [x] `@click` | `@mousedown` | `...` 。可以使用 `$event` 占位原生事件\n-   [x] `watch` 数据监听，详见下方示例\n    -   [x] 声明方式\n    -   [x] api 方式\n-   [x] 生命周期\n    -   [x] `created` 组件创建成功，可以使用 `this` 得到 MVVM 的实例\n    -   [x] `beforeMount` 将要被插入 dom\n    -   [x] `mounted` 组件被添加到 dom，可以使用 `this.$el` 获取根节点 dom\n    -   [x] `beforeUpdate` 组件将要更新\n    -   [x] `updated` 组件更新完毕\n\n## Example\n\n```ts\nimport MVVM from 'mini-mvvm'; // es module, typescript\n// const MVVM from 'mini-mvvm'; // commonjs\n// const MVVM = window['MiniMvvm']; // window\n\nnew MVVM({\n    // 挂载的目标节点的选择器\n    // 如果没有 template，就用这个节点作为编译模板\n    el: '#app',\n    template: `\n    \u003cdiv id=\"app\"\u003e\n        \u003cdiv\u003e{{ content }}\u003c/div\u003e\n    \u003c/div\u003e\n    `,\n    // data\n    data() {\n        return {\n            content: 'this is content.'\n        };\n    },\n    computed: {}, // ...计算属性\n    // ...hook，可以使用 this\n    created() {\n        // 使用api方式去watch\n        this.$watch('key', (val, oldVal) =\u003e {}, { immediate: true });\n    },\n    mounted() {}, // ...hook，可以使用 this.$el\n    methods: {}, // ...方法\n    // ...数据监听\n    watch: {\n        // 声明方式1：\n        watch1(val, oldVal) {},\n        // 声明方式2：\n        watch2: {\n            immediate: true, // 立即执行\n            handler(val, oldVal) {}\n        }\n    }\n});\n```\n\n## Enjoy it! :D\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshalldie%2Fmini-mvvm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshalldie%2Fmini-mvvm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshalldie%2Fmini-mvvm/lists"}