docs: document reactive state attributes
This commit is contained in:
@@ -364,12 +364,18 @@ wrnexus build</code></pre><h2>Where things live</h2><ul><li><code>app/pages</cod
|
||||
view { <button @click="count++">{count}</button> }
|
||||
style { button { padding: 12px; } }
|
||||
}`)}</code></pre>
|
||||
<h2 id="state">State and interpolation</h2><p>State is scoped to the nearest generated <code>data-scope</code>. Text expressions update reactively after hydration.</p><pre><code>${escape(`state count = 0
|
||||
<h2 id="state">State and interpolation</h2><p>State is scoped to the nearest generated <code>data-scope</code>. Text and ordinary attribute expressions update reactively after hydration while retaining useful initial SSR values.</p><pre><code>${escape(`state count = 0
|
||||
state user = { name: "Ada" }
|
||||
state showPassword = false
|
||||
|
||||
view {
|
||||
<p>Count: {count}</p>
|
||||
<p>{user.name}</p>
|
||||
<input type="{showPassword ? 'text' : 'password'}">
|
||||
<button @click="showPassword = !showPassword"
|
||||
aria-label="{showPassword ? 'Hide password' : 'Show password'}">
|
||||
Toggle password
|
||||
</button>
|
||||
}`)}</code></pre>
|
||||
<h2 id="events">Events</h2><p>Any DOM event can use <code>@event="statement"</code>. The compiler emits <code>data-on-event</code>. The expression receives <code>event</code> and can mutate state.</p><div class="table-wrap"><table><thead><tr><th>Syntax</th><th>Purpose</th></tr></thead><tbody><tr><td><code>@click</code></td><td>Pointer or keyboard activation.</td></tr><tr><td><code>@input</code></td><td>Read live field values.</td></tr><tr><td><code>@change</code></td><td>React to committed field changes.</td></tr><tr><td><code>@submit</code></td><td>Handle form submission behavior.</td></tr><tr><td><code>@browser-click</code></td><td>Run only in a browser target.</td></tr><tr><td><code>@mobile-click</code></td><td>Run only in a native/mobile target.</td></tr></tbody></table></div><pre><code>${escape(`<input @input="name = event.target.value">
|
||||
<button @click="count++">Add</button>
|
||||
|
||||
Reference in New Issue
Block a user