Component page template is compiled as ES Template. In addition it has lifecycle hooks, events handling, data managment and Virtual DOM data bindings.
It is useful to use Component page when you need page-specific logic.
Events Handling
Page Component Data
Hello! My name is ${name}. I am ${age} years old.
I like to play:
-
${like.map((item) => $h`
- ${item} `)}
Extended Context
Component page context is also extended with some additional variables.
$f7route
Contains properties of the current route:
- $f7route.url: ${$f7route.url}
- $f7route.path: ${$f7route.path}
- $f7route.params: ${JSON.stringify($f7route.params)}
- $f7route.hash: ${$f7route.hash}
- $f7route.query: ${JSON.stringify($f7route.query)}
$theme
Currently active theme:
- $theme.ios: ${String($theme.ios)}
- $theme.md: ${String($theme.md)}
Virtual DOM
Component page is rendered using Virtual DOM. It means it can automatically update page layout depending on changed state with minimal efforts and with maximum performance.
Ok, so your name is ${name}?
Type new name and it be dynamically changed
Button clicked ${clickCounter} times (double is ${clickCounter * 2})
-
${listItems.map((item) => $h`
- Item ${item} `)}
${listLoading ? $h`
` : $h`
`}
`}
Store ($store)
Store state & methods (actions):
- $store.state.firstName: ${$store.state.firstName}
- $store.state.lastName: ${$store.state.lastName}
- $store.dispatch('helloWorld')}>$store.dispatch('helloWorld')
Store reactivity
${!users.value && $h`
${usersLoading.value && $h`
`}
${!usersLoading.value && $h`
Load Users
`}
`}
${users.value && $h`
-
${users.value.map((user) => $h`
- ${user} `)}