hakowork/vide
3
0
Fork 0
mirror of https://github.com/centau/vide.git synced 2026-08-20 14:41:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Try improve crash course

Browse source
This commit is contained in:
Aaron Smith 2023-11-21 18:48:47 +00:00
parent c288cb92c4
commit 338c66ed57
11 changed files with 223 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

14
docs/tut/crash-course/3-components.md
View file

@ -1,8 +1,11 @@
# Components
Vide encourages separating different parts of your UI into functions called
*components*.
A component is a function that creates and returns a piece of UI.
This is a way to separate your app into small chunks that you can reuse and put
This is a way to separate your UI into small chunks that you can reuse and put
together.
::: code-group
@ -66,12 +69,15 @@ Above is a simple example of a button component being used across files.
A single parameter `props` is used to pass properties to the component.
Components allow you to *encapsulate* behavior. You can only modify the
component in ways that you allow in the component, through the `props` parameter.
You can only modify the component in ways that you allow in the component,
through the `props` parameter.
To create a new button all you must do is call the `Button` function, passing in
values. This saves having to create and set every property each time. Also, when
updating the button component in future, any changes to the button file will be
seen anywhere the button is used in your app.
This can be extended to much more complicated UI.
The `mount()` function is used to set up Vide's reactivity system when creating
your UI. It only needs to be called once at the top-level with the function that
puts together your entire app. It also parents the returned instance to another
a target instance for you.