Vue 3インフラストラクチャ基礎知識講座

インフラストラクチャコース
出力名
1.デフォルト変数

<template>
    <p>{{name}}</p>
</template>

<script>
export default {
    name: 'App',
    setup() {
        const name = "kossie coder";

        return {
            name,
        }
    }
}
</script>

"kossie coder"
2.関数として宣言

<template>
    <p>{{greeting("Joanna")}}</p>
</template>

<script>
export default {
    name: 'App',
    setup() {
        const greeting = (name) => {
        	return `Hello ${name}`
        }

        return {
            greeting
        }
    }
}
</script>

Hello Joanna
参考資料
「≪名前の更新｜Update Name｜Hfm≫」をクリックします

<template>
    <p>{{name}}</p>
    <button @click="updateName()">
    	change!
    </button>
</template>

<script>
import { ref } from "vue"; //ref 가져오기
export default {
    name: 'App',
    setup() {
        const name = ref("Joanna"); //변경될 것은 ref로 감싸기
        const updateName = () => {
        	name.value = "Suji" //그냥 name 바꾸면 안되고 name.value
        }

        return {
            name,
            updateName
        }
    }
}
</script>

Joanna
ボタンをクリックする前にJoanna
Suji
ボタンをクリックしてSujiに変更
Object/ARrayはアクティブです
idの更新をクリック

<template>
    <p>{{name.id}}</p>
    <button @click="updateId()">
    	change!
    </button>
</template>

<script>
import { reactive } from "vue";
export default {
    name: 'App',
    setup() {
        const name = reactive({
        	id: 1
        });
        
        const updateId = () => {
        	name.id = 2
        }

        return {
            name,
            updateName
        }
    }
}
</script>

1
クリックボタンの前1
2
ボタンをクリックして2に変更
データのバインド
1.一方向データv-bindのバインド

<template>
    <input v-bind:value="name">
     <p>현재 name은? {{name}}</p>
    <button v-on:click="updateData()">change data</button>
</template>

<script>
import { ref, reactive } from "vue";

export default {
    name: 'App',

    setup() {
        const name = ref("before");
        const updateData = () => {
            name.value = "after";
        }

        return {
            name,
            updateData
        }
    }
}
</script>

ボタンをクリックするとupdateData関数でnameのinputの値を変更できますが、inputに直接入力すると値が変更されないことを確認できます.
2.バインディング双方向データv-model

<template>
    <input v-model="name">
    <p>현재 name은? {{name}}</p>
</template>

<script>
import { ref, reactive } from "vue";

export default {
    name: 'App',

    setup() {
        const name = ref("before");

        return {
            name
        }
    }
}
</script>

入力値を変更すると、他の関数を実行する必要がなく、名前も変更されることを確認できます.
Vue2 vs Vue3

Fragment
vue 3では、テンプレートラベル内を必ずしも1つのラベルで囲む必要はありません.

setup()

refと

反応