vue.js3 [Vue.js] Immediate Watch를 이용한 🏴1. 구현 의도 test.vue {{ `${cam.cameraSeq}. ${cam.cameraName}` }} export default { props: { info : { type: Object, }, }, data() { return { cam: { cameraSeq: '', cameraName: '' } } }, watch: { info: { handler(newVal) { this.cam = newVal; }, } } }; Vue.js에서는 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있습니다. 저는 test.vue에서 부모로부터 props를 이용해서 info 데이터를 받았습니다. 그리고 info를 cam에 바인딩해서 카메라정보를 화면에 뿌려주려고 하는데요. 실제 구현.. 2024. 2. 15. [Vue.js] Vue의 코드 재사용 방법 - mixin vs Compositon API 🚨1. 현재 프로젝트의 문제점 제가 하고 있는 프로젝트의 여러 컴포넌트에는 현재시간을 불러와서 조회하는 기능이 있습니다. 같은 기능인데 개발자가 다르다 보니 컴포넌트 마다 현재시간을 불러오는 방법이 각각 다르게 구현되어 있었습니다. 최근에 이 시간 조회 방식을 변경해야 했는데, 모든 컴포넌트를 돌아다니면서 수정을 했어야해서 여간 불편했습니다😥 그래서 재사용 가능 기능(여기선 현재시간을 불러오는 기능)을 여러 컴포넌트에 분산시킬 때, 어떤 방법이 좋을지 비교해보았습니다. 💡2. Vue의 코드 재사용 방법 1) EventBus EventBus는 Vue 인스턴스를 이용하여 한 컴포넌트에서 다른 컴포넌트로 이벤트를 전달하는 방법입니다. 이를 통해 컴포넌트간에 데이터나 알림을 보낼 수 있습니다. 👍 장점: "구현.. 2024. 1. 28. Vue] Vue CLI 3.0 프로젝트 생성하기 먼저 Vue Project를 시작하기 위해선 간단한 준비물이 필요합니다. 1. Visual Sudio Code Visual Studio Code는 Microsoft에서 개발한 코드 에디터 어플리게이션입니다. 무료로 사용할 수 있는 소스 코드 편집기이죠. 다양한 프로그래밍 언어를 다양한환경에서 지원하는데 가볍기까지해서 인기가 많은 IDE입니다. Visual Studio Code가 아직 설치되어 있지 않다면 아래 링크에서 설치해주세요. https://code.visualstudio.com/download 2. Extention 설치 Visual Studio Code의 왼쪽 메뉴바에서 extention이모티콘을 클릭한 뒤, 원하는 플러인 명을 검색해주세요. 그리고 오른쪽에서 install을 클릭하면 끝! Ve.. 2022. 4. 5. 이전 1 다음
