過激派がVueをRTAしてみた

とりあえずAPI覚えろ

VueのAPI多すぎんだろぉぉぉ！！！！！
実際はこればっかり使うから目に焼き付けろ！！

• ref()
• computed()
• watch()

ref()

const myName = ref<string>('');
myName.value = 'まじこじま';
console.log(myName.value); // 'まじこじま'

.valueがキモい?
うるさい黙れ！！

computed()

const myName = ref<string>('');
const myNameLength = computed(() => myName.value.length);
console.log(myNameLength.value); // 0
myName.value = 'まじこじま';
console.log(myNameLength.value); // 5

無名関数の中にref()で定義した値突っ込んどけ

watch()

const myName = ref<string>('');
watch(myName, (newName) => {
    console.log(`${newName}? だっさい名前だな!`);
});
myName.value = 'まじこじま'; // -> 'まじこじま? だっさい名前だな!'

見たらわかるやろ?
第三引数でimmediateをtrueにしたら即時実行出来るから！！！！！！
watchEffectとかダルいからやめとけ！！！

npm install pinia

何も考えないでインストールしろ

slot覚えろ

これ、子な？？

<template>
    <button>
        <slot />
    </button>
</template>

んで、これが親な！！

<template>
    <div>
        <MyButton> ボタンA </MyButton>
        <MyButton> ボタンB </MyButton>
        <MyButton> ボタンC </MyButton>
    </div>
</template>

簡単だな！！！！！！

Props

これ親な！！

<template>
    <div>
        <MyButton blue> ボタンA </MyButton>
    </div>
</template>

んで、これが子な！！！！！

<script lang="ts" setup>
defineProps<{ blue?: boolean }>();
</script>
<template>
    <button :class="{ 'bg-blue-500': blue }">
        <slot />
    </button>
</template>

自分で属性定義できて便利だなぁぁぁぁぁ？!

Emits

ん、コォぉぉ！！！

<script lang="ts" setup>
const props = defineProps<{ modelValue: number }>();
const emit = defineEmits<{ (e: 'update:modelValue', value: number): void }>();
const value = computed({
    get: () => props.modelValue,
    set: (newValue) => emit('update:modelValue', newValue),
});
</script>
<template>
    <input type="number" v-model="value" />
</template>

うぉやぁぁぁぁぁ！！！！

<script lang="ts" setup>
const width = ref<number>(100);
</script>
<template>
    <div>
        <InputNumber v-model="width" />
    </div>
</template>

RTAぇぇぇぇぇ！！！！！

楽勝
ダァぁぁぁぁぁぁぁ！！

皆さんが過激派だったらどうやってRTA目指しますか？
コメントお待ちしております