● ref 사용법
더보기
setup () {
const name = ref('Kossie Coder1');
const updateName = () => {
name.value = 'Kossie Coder2';
}
return {
name,
updateName
}
}
- 탬플릿으로 되어 있어 ref 를 사용하여 값을 변경해야한다.
- ref 를 사용할땐 value 를 사용해야한다.
● reactive 사용법 (주로, [], {} 일때 사용된다)
더보기
<template>
<div class="name">{{name}}</div>
<div>{{array.id}}</div>
<b-button
v-on:click="updateName"
variant="primary">
Click
</b-button>
</template>
<script>
import { ref, reactive } from 'vue'
export default {
setup () {
const name = ref('Kossie Coder1');
const array = reactive({
id: 1
});
const updateName = () => {
name.value = 'Kossie Coder2';
array.id = 2;
}
return {
name,
array,
updateName
}
}
}
</script>
<style>
.name {
font-size: 20px;
color: red;
}
</style>
'FRONT > VUE' 카테고리의 다른 글
[vue3] 이벤트 버블링 이란? (0) | 2024.04.24 |
---|---|
[vue3] router-view 사용법 (0) | 2024.04.23 |
[vue3] computed, watchEffect, Watch 사용법 (0) | 2024.04.23 |
[vue3] props, emit 사용법 (0) | 2024.04.22 |
[vue3] vue3 초기셋팅 (0) | 2024.04.19 |