mathias2784/it-know-how

Fork 0

Files

T

Mathias Schneider 8d40597732 init at work

2026-03-27 12:58:01 +01:00

3.9 KiB

Executable File

Raw Permalink Blame History

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:

<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:

class CounterPage:
    def __init__(self):
        self.message = "Hello from Vue"
        self.count = 0

    def increment(self):
        self.count += 1

Vue-style thinking:

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:

<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:

<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.

<script setup lang="ts">
const username = 'alice';

function login() {
  console.log('login clicked');
}
</script>

Common Vue Building Blocks

`ref`

Used for reactive single values.

const count = ref(0);
const username = ref('alice');
const isLoading = ref(false);

`computed`

Used for values derived from other values.

const firstName = ref('Ada');
const lastName = ref('Lovelace');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);

event handlers

Functions triggered by user actions.

<button @click="save">Save</button>

function save() {
  console.log('saving');
}

lifecycle hooks

Code that runs when a component starts.

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.

<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

<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:

What values are reactive state?
Which template elements use that state?
Which functions change that state?
Which computed values or API calls depend on that state?

If you answer those four, most Vue components become understandable.

3.9 KiB Executable File Raw Permalink Blame History