# dmq/mvvm

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/dmq-mvvm).**

5,190 stars · 1,229 forks · CSS

## Links

- GitHub: https://github.com/DMQ/mvvm
- awesome-repositories: https://awesome-repositories.com/repository/dmq-mvvm.md

## Topics

`mvvm` `vue`

## Description

This project is a custom implementation of the Model-View-ViewModel pattern designed to replicate the core reactivity and template parsing of the Vue framework. It functions as a data-binding engine, a reactive state manager, and a custom template compiler.

The framework employs a system for synchronizing model state with DOM elements through property interception and an observer pattern. It uses a parser to scan DOM elements for directives, replacing placeholders and binding data to view nodes to achieve two-way data synchronization.

The system covers reactive data binding and the development of a template compiler that identifies custom directives in HTML to dynamically inject data and manage updates.

## Tags

### Data & Databases

- [Two-Way Data Binding](https://awesome-repositories.com/f/data-databases/data-synchronization/two-way-data-binding.md) — Implements a system that automatically synchronizes changes between data models and UI views in both directions.

### Business & Productivity Software

- [Data Change Listeners](https://awesome-repositories.com/f/business-productivity-software/data-change-listeners.md) — Provides mechanisms that monitor and respond to modifications in data fields using getters and setters. ([source](https://github.com/dmq/mvvm#readme))

### Software Engineering & Architecture

- [MVVM Patterns](https://awesome-repositories.com/f/software-engineering-architecture/mvvm-patterns.md) — Implements the Model-View-ViewModel architectural pattern to separate business logic from the user interface.
- [Property Interception](https://awesome-repositories.com/f/software-engineering-architecture/property-interception.md) — Intercepts object property access using getters and setters to notify subscribers of value modifications.
- [Model Property Proxies](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/change-detection/property-change-observers/model-property-proxies.md) — Connects instance properties to an internal data object to trigger updates through a data observer. ([source](https://github.com/dmq/mvvm#readme))

### User Interface & Experience

- [Data Binding Engines](https://awesome-repositories.com/f/user-interface-experience/data-binding-engines.md) — Implements an engine for synchronizing application state with user interface properties.
- [Reactive State Managers](https://awesome-repositories.com/f/user-interface-experience/reactive-state-managers.md) — Provides a mechanism that synchronizes application data across components via automatic change tracking.
- [State-to-DOM Mappings](https://awesome-repositories.com/f/user-interface-experience/virtual-dom-engines/direct-dom-mapping/language-to-dom-mappings/state-to-dom-mappings.md) — Binds HTML element placeholders to internal state objects during the initial template compilation process.

### Web Development

- [Attribute-Based Directives](https://awesome-repositories.com/f/web-development/attribute-based-directives.md) — Implements mechanisms for binding logic and state to HTML elements via custom attribute directives.
- [Custom Directives](https://awesome-repositories.com/f/web-development/custom-directives.md) — Provides mechanisms for attaching reusable logic and data bindings to DOM elements via custom directives. ([source](https://github.com/dmq/mvvm#readme))
- [Directive Parsing](https://awesome-repositories.com/f/web-development/html-dom-manipulators/html-string-parsing/template-ast-parsing/directive-parsing.md) — Develops a parser that identifies custom directives in HTML to dynamically inject data and manage DOM updates.
- [MVVM Framework Implementations](https://awesome-repositories.com/f/web-development/mvvm-framework-implementations.md) — Implements a custom MVVM framework replicating the core reactivity and template parsing of Vue.
- [Reactive Data Binding](https://awesome-repositories.com/f/web-development/reactive-data-binding.md) — Provides mechanisms that automatically synchronize user interface state with underlying data sources.
- [Directive-to-DOM Compilers](https://awesome-repositories.com/f/web-development/template-data-binding/reactive-binding-updates/reactive-template-compilers/directive-to-dom-compilers.md) — Provides a parser that scans DOM elements for directives to replace placeholders and bind data.
- [Observation-Based Rendering](https://awesome-repositories.com/f/web-development/web-components/component-based-rendering-engines/observation-based-rendering.md) — Provides a rendering system that triggers view updates automatically when observed properties change.
- [Framework Re-implementations](https://awesome-repositories.com/f/web-development/framework-re-implementations.md) — Provides a custom implementation of the Vue framework to demonstrate core reactivity and template parsing.