readme tweak

This commit is contained in:
Geoff Doty 2025-03-29 15:25:01 -04:00
parent 6943c50459
commit ce7cb8893d
1 changed files with 7 additions and 9 deletions

View File

@ -19,20 +19,18 @@ With **Mite** it is just one file and go...
## Getting Started
### Key Features
- **Reactive Data Binding**: Bind data to the DOM using `{{ }}` syntax, and Mite will automatically update the DOM when the data changes.
- **Reactive Two-Way Data Binding**: Bind data to the DOM using `{ }` syntax, and Mite will automatically update the DOM when the data changes.
- **Directives**:
- `m-if`: Conditionally show or hide elements based on a truthy/falsy expression.
- `m-each`: Iterate over arrays to render lists dynamically.
- `:`-prefixed attributes (e.g., `:value`): Bind data to element attributes.
- **Event Handling**: Bind events to methods using `@event` syntax (e.g., `@click`).
- **Lightweight**: Mite is a single class with no external dependencies, making it easy to integrate into any project.
## Usage
```html
<div id="counter">
<button @click="{increment}">{count}</button>
<button @click="{count++}">{count}</button>
</div>
<script type="module">
@ -41,16 +39,16 @@ With **Mite** it is just one file and go...
new Mite('#counter', {
data: {count: 0},
increment(e) {
e.preventDefault();
this.data.count++;
}
});
</script>
```
Any tag property that starts with a `@` is an event, so you can do `@click=""`;
### Options
- `selector`: A CSS selector (string) targets root DOM element (required).
- `opts`: An options object with properties:
- `data` (Object): Reactive data for the app. Changes to `data` properties trigger DOM updates.
- anything else you want, just a POJO
## Test