Vue3 인프런 기초강좌

인프런 기초강좌

이름 출력하기

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

기본자료형은 ref

클릭하면 이름 업데이트하기

<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는 reactive

클릭하면 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>

별도의 함수 실행 없이도 input값을 바꾸면 name도 바뀌는 것을 확인할 수 있다.

Vue2 vs Vue3

1. Fragment
   vue3에서는 template 태그 안에 꼭 하나의 태그로 감싸지 않아도 된다.
2. setup()
3. ref와 reactive