72 lines
1.4 KiB
Markdown
Executable File
72 lines
1.4 KiB
Markdown
Executable File
# Vue Learning Path
|
|
|
|
Start here if you are new to Vue and coming from Python.
|
|
|
|
## Suggested reading order
|
|
|
|
1. [[00-Vue for Python Developers]]
|
|
2. [[01-Refs, Computed, and Reactivity]]
|
|
3. [[02-Templates, v-model, and Events]]
|
|
4. [[03-Components, Props, Lifecycle, and Composables]]
|
|
5. [[04-FlexibilityTable Filter Flow]]
|
|
|
|
## What each note covers
|
|
|
|
### Vue for Python Developers
|
|
|
|
The big picture:
|
|
|
|
- what a Vue component is
|
|
- template vs script
|
|
- what reactive means
|
|
- how to read Vue code without getting lost
|
|
|
|
### Refs, Computed, and Reactivity
|
|
|
|
State management basics:
|
|
|
|
- `ref`
|
|
- `.value`
|
|
- `computed`
|
|
- when to store data vs derive data
|
|
|
|
### Templates, v-model, and Events
|
|
|
|
Template mechanics:
|
|
|
|
- interpolation with `{{ ... }}`
|
|
- `v-model`
|
|
- `@click`
|
|
- `:disabled`
|
|
- how template code connects to script code
|
|
|
|
### Components, Props, Lifecycle, and Composables
|
|
|
|
Code organization:
|
|
|
|
- parent and child components
|
|
- props
|
|
- `onMounted`
|
|
- composables such as `useJsonDownload()`
|
|
|
|
### FlexibilityTable Filter Flow
|
|
|
|
Real project walkthrough:
|
|
|
|
- `selectedPeriodStartFrom`
|
|
- selected vs applied filters
|
|
- backend payload building
|
|
- table refresh flow
|
|
- export behavior
|
|
|
|
## Best way to study these notes
|
|
|
|
For each note:
|
|
|
|
1. Read the explanation slowly.
|
|
2. Copy one code example into a small test component.
|
|
3. Change one line and predict what the UI will do.
|
|
4. Run it and compare expectation with result.
|
|
|
|
That loop is the fastest way to get comfortable with Vue.
|