readme tweak
This commit is contained in:
parent
6943c50459
commit
ce7cb8893d
16
README.md
16
README.md
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue