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
|
## Getting Started
|
||||||
|
|
||||||
### Key Features
|
### 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**:
|
- **Directives**:
|
||||||
- `m-if`: Conditionally show or hide elements based on a truthy/falsy expression.
|
- `m-if`: Conditionally show or hide elements based on a truthy/falsy expression.
|
||||||
- `m-each`: Iterate over arrays to render lists dynamically.
|
- `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`).
|
- **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.
|
- **Lightweight**: Mite is a single class with no external dependencies, making it easy to integrate into any project.
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
```html
|
```html
|
||||||
|
|
||||||
<div id="counter">
|
<div id="counter">
|
||||||
<button @click="{increment}">{count}</button>
|
<button @click="{count++}">{count}</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
|
@ -41,16 +39,16 @@ With **Mite** it is just one file and go...
|
||||||
|
|
||||||
new Mite('#counter', {
|
new Mite('#counter', {
|
||||||
data: {count: 0},
|
data: {count: 0},
|
||||||
increment(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.data.count++;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</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
|
## Test
|
||||||
|
|
Loading…
Reference in New Issue