diff --git a/web/doc/views.html b/web/doc/views.html index c71ba282..1468bdd9 100644 --- a/web/doc/views.html +++ b/web/doc/views.html @@ -68,7 +68,7 @@
Try entering ViewInterpolation.update("message", "New Message!")
in the console to update the view.
Browser events, component events, and lifecycle events can be handled by using an attribute starting with @
.
The bind
event is a special event used to bind an input value to a variable and a variable to the input value.
<p>{text}</p>
+<input type="text" @bind={text}/>
+
+Moon({
+ root: "#root",
+ text: "Hello Moon!"
+});
+
+
+
+
+
+Learn about component events in the components section.
Elements can be rendered based on certain conditions using the If
, ElseIf
, and Else
components.
<div If={condition}>
diff --git a/web/src/doc/views.md b/web/src/doc/views.md
index 00163af4..34eeaa43 100644
--- a/web/src/doc/views.md
+++ b/web/src/doc/views.md
@@ -26,7 +26,7 @@ Moon({
+Try entering `ViewInterpolation.update("message", "New Message!")` in the console to update the view.
+
### Events
Browser events, component events, and lifecycle events can be handled by using an attribute starting with `@`.
@@ -69,6 +71,36 @@ Moon({
});
+##### Bind Events
+
+The `bind` event is a special event used to bind an input value to a variable and a variable to the input value.
+
+```mvl
+{text}
+
+```
+
+```js
+Moon({
+ root: "#root",
+ text: "Hello Moon!"
+});
+```
+
+
+
+
+
+##### Component Events
+
+Learn about component events in the [components section](./components.html).
+
### Conditionals
Elements can be rendered based on certain conditions using the `If`, `ElseIf`, and `Else` components.