[220630] 한글입력/compositionAPI

- 한글 입력 

<template>
<div class="todo-creator">
<input
:value="title"
type="text"
placeholder="할 일을 추가하세요!"
@input="title = ($event.target as HTMLInputElement).value"
@keydown.enter="createTodo" />
<button @click="createTodo">
추가
</button>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { mapStores } from 'pinia'
import { useTodoStore } from '~/store/todo'

export default defineComponent({
data() {
return {
title: ''
}
},
computed: {
...mapStores(useTodoStore)
},
methods: {
createTodo(event: KeyboardEvent | MouseEvent) { //그냥 Event로 하게 할 수 있음! 하지만 엄격하게 하는것을 선호~
if ((event as KeyboardEvent).isComposing) return //isComposing이 true면 한글 입력이 되고 있는 중이라는 뜻!! //isComposing은 keyboardEvent에서만 있음!! 그래서 안해주면 에러~
if (!this.title.trim()) return //빈문자 인지~

this.todoStore.createTodo(this.title)
this.title = '' // 서버에 입력된 이후에 초기화~!!
}
}
})
</script>

---

[실강]

- 컴포지션에서는 반응형이 아닌 출력만 하는 데이터도 사용 가능

- ref :

1.반응형 데이터 만들기(원시형 참조형 가능)

3. ref 객체의 값을 사용할땐 .value 를 붙인다.

2. this.$refs 요소참조

import { ref } from 'vue'

 

 

const movie = ref({

title: '',

poster: ''

})

movie.value.title = (movieStore.movie.Title as string)

- reactive:  

1.객체와 배열만 반응성 부여 가능 -> 반응형 데이터 만들기

2. 객체에 value 를 안 붙인다.

const movie = reactive({

title: '',

poster: ''

})

---

- defineComponent 는 optionsAPI 에서 ts 를 사용하기 위한 모듈

 

---

toRefs /toRef

- 객체구조 분해할당을 할때 반응성이 증발 해버리는 것을 방지

const { name } = $props
const { name } = toRefs($props)
// 위와 같은 코드
const name = toRef($props,'name')