# 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]]