Vue mini-cheatsheet gleaned from tutorial (https://vuejs.org/tutorial/)

App.vue

<!-- npm create vue@latest, VSCode install Volar -->
<script setup>
import { reactive } from "vue";
import { ref } from "vue";

const counter = reactive({
    count: 0,
});

const someClass = ref("some");
const count2 = ref(0);

const increment1 = () => (counter.count += 1);
const increment2 = () => count2.value++;

const input1Text = ref("");
const onInput1 = (e) => (input1Text.value = e.target.value);

const input2Text = ref("");

const togg = ref(true)
const toggle = () => togg.value = !togg.value;

const items = [1, 2, 3]

let iid = 0
const iv = ref("")
const items2 = ref([{ id: 1, v: "A", done: true }, { id: 2, v: "B", done: false }])
const addItem = () => {
    items2.value.push({ id: iid++, v: iv.value, done: false });
    iv.value = "";
}
const removeItem = (item) => items2.value = items2.value.filter(({ id }) => id != item.id)

const hideCompleted = ref(false)
import { computed } from "vue";
const filteredItems = computed(() => hideCompleted.value ? items2.value.filter((i) => !i.done) : items2.value)

import { onMounted } from "vue";
const pElementRef = ref(null);
onMounted(() => pElementRef.value.textContent += "!")

import { watch } from "vue";
watch(hideCompleted, (newItems2) => {
    console.log(`new items are: ${newItems2}`)
})

const todoId = ref(1)
const todoData = ref(null)

const fetchData = async () => {
    todoData.value = null
    const res = await fetch(
        `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
    )
    todoData.value = await res.json()
}

// fetchData()
todoData.value = "<initial>"
watch(todoId, fetchData)

import ChildComp from "./Child.vue"

const greeting = ref('Hello from parent');
const childMsg1 = ref("");
const childMsg2 = ref("");
</script>

<template>
    <h1>Hello, world.</h1>
    <p>Count is {{ counter.count }}</p>
    <p v-bind:class="someClass">some</p>
    <p :class="someClass">some</p>
    <button v-on:click="increment1">{{ counter.count }}</button>
    <button @click="increment2">{{ count2 }}</button><br />
    <input :value="input1Text" @input="onInput1">
    <span>{{ input1Text }}</span>
    <br>
    <input v-model="input2Text">
    <span>{{ input2Text }}</span><br>
    <button @click="toggle">{{ togg }}</button>
    <span v-if="togg">Y</span><span v-else>N</span>
    <ul>
        <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
    <form @submit.prevent="addItem">
        <input v-model="iv" required placeholder="iv">
        <button>+</button>
    </form>
    <ul>
        <li v-for="item in filteredItems" :key="item.id">
            <input type="checkbox" v-model="item.done">
            <span :class="{ done: item.done }">{{ item.v }}</span>
            <button @click="removeItem(item)">-</button>
        </li>
    </ul>
    <button @click="hideCompleted = !hideCompleted">{{ hideCompleted ? "Show" :
        "Hide" }}</button>
    <p ref="pElementRef">Hello</p>

    <p>Todo id: {{ todoId }}</p>
    <button @click="todoId++" :disabled="!todoData">Fetch next todo</button>
    <p v-if="!todoData">Loading...</p>
    <pre v-else>{{ todoData }}</pre>
    <ChildComp msg="greeting" v-on:response="(msg) => childMsg1 = msg">
    </ChildComp>
    {{ childMsg1 }}
    <ChildComp :msg="greeting" @response="(msg) => childMsg2 = msg">
        {{ childMsg2 }}
    </ChildComp>
    {{ childMsg2 }}
</template>

<style>
.some {
    color: red;
}

.done {
    text-decoration: line-through;
}
</style>

<!--

https://vuejs.org/guide/quick-start.html
Main guide: https://vuejs.org/guide/essentials/application.html
Examples: https://vuejs.org/examples/
-->

Child.vue

<script setup>
const props = defineProps({
    msg: String
})

// declare emitted events
const emit = defineEmits(['response'])
emit('response', 'hello from child')
</script>

<template>
    <h2>Child!</h2>
    {{ props.msg }}
    {{ msg }}
    <slot>Fallback content</slot>
</template>