55 lines
942 B
Vue
55 lines
942 B
Vue
<script setup lang="ts">
|
|
// #region Props & Emits
|
|
const props = defineProps<{
|
|
title: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update', value: string): void
|
|
}>()
|
|
// #endregion
|
|
|
|
// #region State & Computed
|
|
// =============================
|
|
const count = ref(0)
|
|
const double = computed(() => count.value * 2)
|
|
// #endregion
|
|
|
|
// #region Lifecycle Hooks
|
|
onMounted(() => {
|
|
// init code
|
|
fetchData()
|
|
})
|
|
// #endregion
|
|
|
|
// #region Functions
|
|
async function fetchData() {
|
|
console.log('fetched')
|
|
}
|
|
// #endregion region
|
|
|
|
// #region Utilities & event handlers
|
|
function increment() {
|
|
count.value++
|
|
}
|
|
// #endregion
|
|
|
|
// #region Watchers
|
|
watch(count, (newVal, oldVal) => {
|
|
console.log('count changed:', oldVal, '->', newVal)
|
|
})
|
|
// #endregion
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<p>Count: {{ count }}</p>
|
|
<p>Double: {{ double }}</p>
|
|
<button @click="increment">+1</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* component style */
|
|
</style>
|