Vue 3 segédlet

<script setup>
import { ref } from 'vue'

const darab = ref(0)

function novel() {
  darab.value++
}
</script>

<template>
  <button @click="novel">Kattintások: {{ darab }}</button>
</template>

import { reactive } from 'vue'

const urlap = reactive({
  szoveg: '',
  hatarido: null,
})

urlap.szoveg = 'Bevásárlás'

import { ref, computed } from 'vue'

const teendok = ref([
  { id: 1, szoveg: 'Tej', kesz: true },
  { id: 2, szoveg: 'Kenyér', kesz: false },
])

const hatralevo = computed(() => teendok.value.filter(t => !t.kesz))

import { ref, watch, watchEffect } from 'vue'

const kereses = ref('')

watch(kereses, (uj, regi) => {
  console.log(regi, '->', uj)
})

watchEffect(() => {
  document.title = 'Keresés: ' + kereses.value
})

<template>
  <h2>{{ cim }}</h2>
  <p>{{ teendok.length }} teendő, ebből {{ hatralevo.length }} van hátra</p>
  <p>{{ surgos ? 'Sürgős!' : 'Ráér' }}</p>
</template>

<template>
  <img :src="kep" :alt="leiras">
  <button :disabled="!uj.trim()">Hozzáadás</button>
  <li :class="{ kesz: teendo.kesz, surgos: teendo.surgos }">{{ teendo.szoveg }}</li>
  <div :style="{ width: szazalek + '%' }"></div>
</template>

<script setup>
import { ref } from 'vue'

const uj = ref('')
const teendok = ref([])

function hozzaad() {
  if (!uj.value.trim()) return
  teendok.value.push({ id: Date.now(), szoveg: uj.value, kesz: false })
  uj.value = ''
}
</script>

<template>
  <form @submit.prevent="hozzaad">
    <input v-model="uj" @keyup.esc="uj = ''">
    <button>Hozzáadás</button>
  </form>
</template>

<template>
  <p v-if="teendok.length === 0">Nincs teendő.</p>
  <p v-else-if="hatralevo.length === 0">Minden kész.</p>
  <p v-else>{{ hatralevo.length }} teendő van hátra.</p>

  <div v-show="nyitva">Beállítások</div>
</template>

<script setup>
import { ref } from 'vue'

const teendok = ref([
  { id: 1, szoveg: 'Tej' },
  { id: 2, szoveg: 'Kenyér' },
])

function torol(id) {
  teendok.value = teendok.value.filter(t => t.id !== id)
}
</script>

<template>
  <ol>
    <li v-for="(teendo, i) in teendok" :key="teendo.id">
      {{ i + 1 }}. {{ teendo.szoveg }}
      <button @click="torol(teendo.id)">Törlés</button>
    </li>
  </ol>
</template>

<script setup>
import { ref } from 'vue'

const szoveg = ref('')
const darab = ref(1)
const kesz = ref(false)
const kategoria = ref('otthon')
</script>

<template>
  <input v-model.trim="szoveg">
  <input v-model.number="darab" type="number">
  <label><input v-model="kesz" type="checkbox"> Kész</label>
  <select v-model="kategoria">
    <option value="otthon">Otthon</option>
    <option value="munka">Munka</option>
  </select>
</template>

<script setup>
import TeendoLista from './components/TeendoLista.vue'
</script>

<template>
  <TeendoLista />
</template>

<script setup>
const { szoveg, kesz, cimke = 'általános' } = defineProps({
  szoveg: { type: String, required: true },
  kesz: Boolean,
  cimke: String,
})
</script>

<template>
  <li :class="{ kesz }">{{ szoveg }} <small>{{ cimke }}</small></li>
</template>

<TeendoElem
  v-for="teendo in teendok"
  :key="teendo.id"
  :szoveg="teendo.szoveg"
  :kesz="teendo.kesz"
/>

<script setup>
const { szoveg } = defineProps({ szoveg: String })
const emit = defineEmits(['torles'])
</script>

<template>
  <li>
    {{ szoveg }}
    <button @click="emit('torles')">Törlés</button>
  </li>
</template>

<TeendoElem
  v-for="teendo in teendok"
  :key="teendo.id"
  :szoveg="teendo.szoveg"
  @torles="torol(teendo.id)"
/>

<script setup>
const szoveg = defineModel({ type: String, default: '' })
</script>

<template>
  <input v-model="szoveg" class="mezo">
</template>

<script setup>
import { ref } from 'vue'
import SzovegMezo from './SzovegMezo.vue'

const uj = ref('')
</script>

<template>
  <SzovegMezo v-model="uj" />
  <p>Beírva: {{ uj }}</p>
</template>

<template>
  <section class="kartya">
    <header>
      <slot name="fejlec">Teendők</slot>
    </header>
    <slot />
  </section>
</template>

<Kartya>
  <template #fejlec>Mai teendők</template>
  <TeendoLista />
</Kartya>

import { ref, provide } from 'vue'

const tema = ref('sotet')
provide('tema', tema)

import { inject } from 'vue'

const tema = inject('tema')

<script setup>
import { ref, onMounted } from 'vue'

const teendok = ref([])
const allapot = ref('tolt')

onMounted(async () => {
  try {
    const valasz = await fetch('/api/teendok')
    if (!valasz.ok) throw new Error('HTTP ' + valasz.status)
    teendok.value = await valasz.json()
    allapot.value = 'kesz'
  } catch {
    allapot.value = 'hiba'
  }
})
</script>

<template>
  <p v-if="allapot === 'tolt'">Betöltés…</p>
  <p v-else-if="allapot === 'hiba'">Nem sikerült betölteni.</p>
  <ul v-else>
    <li v-for="t in teendok" :key="t.id">{{ t.szoveg }}</li>
  </ul>
</template>

<script setup>
import { useTemplateRef, onMounted } from 'vue'

const mezo = useTemplateRef('uj-mezo')

onMounted(() => {
  mezo.value.focus()
})
</script>

<template>
  <input ref="uj-mezo">
</template>

import { ref, nextTick, useTemplateRef } from 'vue'

const teendok = ref([])
const lista = useTemplateRef('lista')

async function hozzaad(szoveg) {
  teendok.value.push({ id: Date.now(), szoveg, kesz: false })
  await nextTick()
  lista.value.lastElementChild.scrollIntoView()
}

import { ref, watch } from 'vue'

export function useTarolt(kulcs, alap) {
  const mentett = localStorage.getItem(kulcs)
  const ertek = ref(mentett ? JSON.parse(mentett) : alap)

  watch(ertek, uj => {
    localStorage.setItem(kulcs, JSON.stringify(uj))
  }, { deep: true })

  return ertek
}

import { useTarolt } from '../composables/useTarolt.js'

const teendok = useTarolt('teendok', [])