<template>
<p>{{name}}</p>
</template>
<script>
export default {
name: 'App',
setup() {
const name = "kossie coder";
return {
name,
}
}
}
</script>
"kossie coder"
<template>
<p>{{greeting("Joanna")}}</p>
</template>
<script>
export default {
name: 'App',
setup() {
const greeting = (name) => {
return `Hello ${name}`
}
return {
greeting
}
}
}
</script>
Hello Joanna
<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로 변경됨
<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로 변경됨
<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에서 직접 입력하면 값이 바뀌지 않는것을 확인할 수 있다.
<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도 바뀌는 것을 확인할 수 있다.
- Fragment
vue3에서는 template 태그 안에 꼭 하나의 태그로 감싸지 않아도 된다.- setup()
- ref와 reactive