init at work

vue/00-Vue for Python Developers.md

@@ -0,0 +1,215 @@
+# 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]]