shalldie / Mini Mvvm
基于 virtual dom 的轻量级mvvm库 >_<#@!
Stars: ✭ 62
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Mini Mvvm
Cascade
A modern library for creating user interfaces.
Stars: ✭ 50 (-19.35%)
Mutual labels: mvvm, virtual-dom
Ioing
Implement the solutions of performance improvement and componentization for your SPA (single page application) products with this Progressive Web App Development Engine.
Stars: ✭ 224 (+261.29%)
Mutual labels: mvvm, virtual-dom
Sharpen
(Demo) A v-dom "diff" engine based on WebAssembly, aim to build efficient and fluent web apps.
Stars: ✭ 20 (-67.74%)
Mutual labels: virtual-dom, mvvm
Thirtyinch
a MVP library for Android favoring a stateful Presenter
Stars: ✭ 1,052 (+1596.77%)
Mutual labels: mvvm
Mvvmnano
The small and smart MVVM framework made with ❤ for Xamarin.Forms.
Stars: ✭ 53 (-14.52%)
Mutual labels: mvvm
Pinboard Kotlin
Unofficial Pinboard android app, developed as a playground to study many topics related to Android. Kotlin + Coroutines + MVVM
Stars: ✭ 60 (-3.23%)
Mutual labels: mvvm
Apprun
AppRun is a JavaScript library for developing high-performance and reliable web applications using the elm inspired architecture, events and components.
Stars: ✭ 1,087 (+1653.23%)
Mutual labels: virtual-dom
Subloader
Subloader is a simple and minimalistic subtitle downloader that enables you to quickly find and download subtitles for your video files.
Stars: ✭ 53 (-14.52%)
Mutual labels: mvvm
Gsygithubappkotlin
超完整的Android Kotlin 项目,功能丰富,适合学习和日常使用。GSYGithubApp系列的优势:目前已经拥有Flutter、Weex、ReactNative、Kotlin四个版本。 功能齐全,项目框架内技术涉及面广,完成度高。开源Github客户端App,更好的体验,更丰富的功能,旨在更好的日常管理和维护个人Github,提供更好更方便的驾车体验Σ( ̄。 ̄ノ)ノ。同款Weex版本: https://github.com/CarGuo/GSYGithubAppWeex 、同款React Native版本 : https://github.com/CarGuo/GSYGithubApp 、 同款Flutter版本: https://github.com/CarGuo/GSYGithubAppFlutter
Stars: ✭ 1,066 (+1619.35%)
Mutual labels: mvvm
Awesome Android Kotlin Apps
👓 A curated list of awesome android kotlin apps by open-source contributors.
Stars: ✭ 1,058 (+1606.45%)
Mutual labels: mvvm
Asm Dom Boilerplate
A simple boilerplate to start using asm-dom without configuration.
Stars: ✭ 49 (-20.97%)
Mutual labels: virtual-dom
Disneymotions
🦁 A Disney app using transformation motions based on MVVM (ViewModel, Coroutines, Flow, LiveData, Room, Repository, Koin) architecture.
Stars: ✭ 1,105 (+1682.26%)
Mutual labels: mvvm
Ios
A sample project demonstrating MVVM, RxSwift, Coordinator Pattern, Dependency Injection
Stars: ✭ 49 (-20.97%)
Mutual labels: mvvm
Mvvmrecurve
MVVM框架, 这个架构支持RestFul风格的Api和GraphQL,你可以根据自身需求添加recurve-retrofit2-support库(RestFul)或recurve-apollo-support库(GraphQL)实现相应的支持。 该架构同时使用纯Kotlin开发,但是你也可以在Java中使用它。
Stars: ✭ 51 (-17.74%)
Mutual labels: mvvm
Business Search App Java
Showcases object oriented programming in Java, Java Swing, Kotlin, and Android
Stars: ✭ 53 (-14.52%)
Mutual labels: mvvm
mini-mvvm
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
Development && Production
npm run dev:mini-mvvm 开发调试
npm run build 生产构建
Ability
- [x] VNode 基于虚拟 dom: virtual dom - mini-vdom
- [x] 数据监听
- [x]
data
、computed
变动监听 - [x] 数组方法监听
push
|pop
|shift
|unshift
|splice
|sort
|reverse
- [x]
- [x]
computed
计算属性 - [x]
文本节点
数据绑定,可以是一段表达式 - [x]
attribute
数据绑定- [x] 支持绑定 data、computed,支持方法,可以是一段表达式
- [x] 常用指令
- [x]
m-model
双向绑定。 支持input
、textarea
、select
- [x]
m-if
条件渲染。条件支持data
、computed
、一段表达式 - [x]
m-for
循环。(item,index) in array
、item in array
- [x]
- [x] 事件绑定
- [x]
@click
|@mousedown
|...
。可以使用$event
占位原生事件
- [x]
- [x]
watch
数据监听,详见下方示例- [x] 声明方式
- [x] api 方式
- [x] 生命周期
- [x]
created
组件创建成功,可以使用this
得到 MVVM 的实例 - [x]
beforeMount
将要被插入 dom - [x]
mounted
组件被添加到 dom,可以使用this.$el
获取根节点 dom - [x]
beforeUpdate
组件将要更新 - [x]
updated
组件更新完毕
- [x]
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].