📌 목차 Introduction v-model(value, event) v-model argument mutilple v-model Conclusion Reference 📌 Introduction 안녕하세요. vue3에서 v-model에 새로운 기능들이 있어서 이렇게 포스팅을 작성하게 되었습니다. 해당 코드는 여기서확인 할 수 있습니다. 📌 v-model(value, event) 새롭게 바뀐 vue3에서는 이제 props로 value와 input 이벤트로 v-model을 사용할 수 없습니다. value -> model-value @input -> @update:model-value 로 바뀌었습니다. 📌 v-model argument 이런식으로 name을 지정해 줄 수 있습니다. // MyName.vue ..
📌 목차 Introduction What is teleport? Usage Conclusion Reference 📌 Introduction 안녕하세요. 이번에는 teleport에 대해서 알아보겠습니다. 해당 코드는 여기서 확인할 수 있습니다. 📌 What is teleport? teleport는 vue2에서 vue-teleport와 똑같습니다. 문서에서는 주로 modal을 사용할때 쓴다고 하네요. to를 이용해서 보낼수 있는데 그냥 일반적인 string으로는 사용하지 않습니다. 아이디나 클래스를 사용해서 사용하라고 하네요. 당연한 얘기지만 원하는 곳으로 제대로 보낼수 있어야 하기 때문입니다. 📌 Usage // App.js MyDiv01 MyDiv02 이제 div(#teleport)안으로 들어가집니다. ..
📌 목차 Introduction What is Provide/Inject? Usage Reactice Usage Conclusion Reference 📌 Introduction 안녕하세요. 이번 포스팅에서는 새로운 provide/inject에 대해서 알아보겠습니다. 해당 코드는 여기서볼수 있습니다. 📌 What is Provide/Inject? 만약 이런 상황이라고 가정해볼게요. 상위의 부모에서 물론 props로 전달이 가능하겠지만 좀더 깔끔한 방법으로 한번에 전달할 순 없을까요? 네 그게 provide/inject입니다. 🎉 📌 Basic Usage 컴포넌트 구조 입니다. |_App -> provide ⭐️ |_MyDiv1 |_MyDiv2 |_MyDiv3 |_InjectedPractice -> inje..
📌 목차 Introduction Life cycle in vue Hook inside setup Conclusion Reference 📌 Introduction 안녕하세요. 오늘은 Vue3에 새로운 life cycle에 대해서 알아보려고 합니다. 해당 코드는 여기서 확인할 수 있습니다. 📌 Hook inside setup 먼저 새롭게 바뀐 것들에 대해서 Vue3 공식 문서에 자세하게 나와있습니다. 네 이제 beforeCreated나 created는 굳이 선언을 할필요가 없어 졌습니다. import { onMounted, nextTick, onUpdated } from 'vue'; export default { name: 'App', components: { HelloWorld }, setup() { co..
📌 목차 Introduction computed watchEffect watch Conclusion Reference 📌 Introduction 안녕하세요. 이번 포스팅에서는 computed와 watch에 대해 알아보겠습니다. 해당 코드는 여기서확인할 수 있습니다. 📌 computed computed는 기존 vue 2에서의 computed와 같습니다. 다른 점은 immutable ref object를 반환합니다. import { ref, computed } from 'vue'; export default { setup() { const count = ref(1); const plusOne = computed(() => count.value + 1); const onClick = () => ..
📌 목차 Introduction ref unref toRef toRefs isRef customRef shallowRef triggerRef Conclusion Reference 📌 Introduction 안녕하세요. 이번 포스팅은 vue3의 refs에 대해 알아보겠습니다. 해당 코드는 여기서확인 하실수 있습니다. 📌 ref ref inner value로 reactive하고 mutable한 객체를 반환합니다. ref 객체는 value property를 가지고 있습니다. import { ref } from 'vue'; export default { setup() { const count = ref(0); const onClick = () => { console.log(count); // { ..
📌 목차 Introduction reactive readonly isProxy isReactive isReadonly toRaw markRaw shallowReactive shallowReadonly Conclusion Reference 📌 Introduction 안녕하세요. 오늘은 vue3의 새로운 reactive apis에 대해 알아보겠습니다. 해당 코드는 여기서 확인할 수 있습니다.🎉 📌 reactive reactive는 deep-copy된 object를 반환합니다. import { reactive } from 'vue'; export default { name: 'App', setup() { const obj = reactive({ count: 0 }); const c..
