216 lines
3.9 KiB
Markdown
Executable File
216 lines
3.9 KiB
Markdown
Executable File
# Vue for Python Developers
|
|
|
|
This note gives you a practical mental model for Vue if you already know Python.
|
|
|
|
## The Big Idea
|
|
|
|
Vue components are small units that combine:
|
|
|
|
- template: what should be shown
|
|
- script: data and logic
|
|
- style: how it should look
|
|
|
|
A Vue single-file component often looks like this:
|
|
|
|
```vue
|
|
<template>
|
|
<p>{{ message }}</p>
|
|
<button @click="increment">Clicked {{ count }} times</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
const message = 'Hello from Vue';
|
|
const count = ref(0);
|
|
|
|
function increment() {
|
|
count.value += 1;
|
|
}
|
|
</script>
|
|
```
|
|
|
|
## Python Analogy
|
|
|
|
Think of a Vue component like a Python object plus a small HTML view.
|
|
|
|
Python-style thinking:
|
|
|
|
```python
|
|
class CounterPage:
|
|
def __init__(self):
|
|
self.message = "Hello from Vue"
|
|
self.count = 0
|
|
|
|
def increment(self):
|
|
self.count += 1
|
|
```
|
|
|
|
Vue-style thinking:
|
|
|
|
```ts
|
|
const message = 'Hello from Vue';
|
|
const count = ref(0);
|
|
|
|
function increment() {
|
|
count.value += 1;
|
|
}
|
|
```
|
|
|
|
Difference:
|
|
|
|
- In Python, changing `self.count` changes object state.
|
|
- In Vue, changing `count.value` changes reactive state and the UI updates automatically.
|
|
|
|
## What "Reactive" Means
|
|
|
|
Reactive means the UI watches data. When the data changes, Vue updates the screen.
|
|
|
|
Example:
|
|
|
|
```vue
|
|
<template>
|
|
<p>{{ name }}</p>
|
|
<button @click="rename">Rename</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
const name = ref('Mathias');
|
|
|
|
function rename() {
|
|
name.value = 'Mathias 2';
|
|
}
|
|
</script>
|
|
```
|
|
|
|
When `name.value` changes, the paragraph updates.
|
|
|
|
## Template vs Script
|
|
|
|
The template is not plain HTML. It is HTML with Vue features.
|
|
|
|
Example:
|
|
|
|
```vue
|
|
<template>
|
|
<p>{{ username }}</p>
|
|
<button @click="login">Login</button>
|
|
</template>
|
|
```
|
|
|
|
- `{{ username }}` means: print a variable into the HTML.
|
|
- `@click="login"` means: run the function when clicked.
|
|
|
|
The script defines the variables and functions used by the template.
|
|
|
|
```ts
|
|
<script setup lang="ts">
|
|
const username = 'alice';
|
|
|
|
function login() {
|
|
console.log('login clicked');
|
|
}
|
|
</script>
|
|
```
|
|
|
|
## Common Vue Building Blocks
|
|
|
|
### `ref`
|
|
|
|
Used for reactive single values.
|
|
|
|
```ts
|
|
const count = ref(0);
|
|
const username = ref('alice');
|
|
const isLoading = ref(false);
|
|
```
|
|
|
|
### `computed`
|
|
|
|
Used for values derived from other values.
|
|
|
|
```ts
|
|
const firstName = ref('Ada');
|
|
const lastName = ref('Lovelace');
|
|
|
|
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
|
|
```
|
|
|
|
### event handlers
|
|
|
|
Functions triggered by user actions.
|
|
|
|
```vue
|
|
<button @click="save">Save</button>
|
|
```
|
|
|
|
```ts
|
|
function save() {
|
|
console.log('saving');
|
|
}
|
|
```
|
|
|
|
### lifecycle hooks
|
|
|
|
Code that runs when a component starts.
|
|
|
|
```ts
|
|
onMounted(async () => {
|
|
await loadData();
|
|
});
|
|
```
|
|
|
|
This is roughly like running setup code after the component appears on screen.
|
|
|
|
## `v-model` in One Sentence
|
|
|
|
`v-model` is two-way binding between a form field and a reactive variable.
|
|
|
|
```vue
|
|
<input v-model="username" />
|
|
```
|
|
|
|
If the user types into the input, `username` changes.
|
|
If `username` changes in code, the input display changes.
|
|
|
|
## Example: Filter Form
|
|
|
|
```vue
|
|
<template>
|
|
<input v-model="searchText" />
|
|
<button @click="apply">Apply</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
const searchText = ref('');
|
|
|
|
function apply() {
|
|
console.log('User searched for:', searchText.value);
|
|
}
|
|
</script>
|
|
```
|
|
|
|
This is very similar to your date filter selects in FlexibilityTable.
|
|
|
|
## Good Beginner Rule
|
|
|
|
When reading Vue code, ask these four questions:
|
|
|
|
1. What values are reactive state?
|
|
2. Which template elements use that state?
|
|
3. Which functions change that state?
|
|
4. Which computed values or API calls depend on that state?
|
|
|
|
If you answer those four, most Vue components become understandable.
|
|
|
|
## Related Notes
|
|
|
|
- [[01-Refs, Computed, and Reactivity]]
|
|
- [[02-Templates, v-model, and Events]]
|
|
- [[03-Components, Props, Lifecycle, and Composables]]
|
|
- [[04-FlexibilityTable Filter Flow]]
|