Front-end5 [Vue.js] 부모-자식간의 데이터 전달 (Props) - Props : 부모가 가지고 있는 데이터를 자식컴포넌트에게 전달해줄 때 사용하는 Properties- v-bind : 부모에게서 전달하고자 하는 값 Given...1) 부모 컴포넌트 : User2) 자식 컴포넌트 : UserDetail, UserEdit - User.vue↓(부모) User 컴포넌트 이름: {{ name }} 이름 변경 // UserDetail 컴포넌트에 name 속성을 전달 //:NAME : props의 변수명, "name":어떤 값을 넣어줄거냐~ .. 2024. 6. 17. [vue3] Lifecycle -> onMounted() 에 대해 알아보자 ! 안녕하세요. 윾진입니다. 너무 덥네요.생명에 지장이 올 것 같은 더위입니다.그런 의미로 오늘은 생명주기와 그 중 onMounted 훅에 대해 살펴봅시다.몇번 뵀으니 이제 반모로 갑니다. 댓글도 반모로 쓰세요. (반말모드 라는 뜻 ㅋㅋ)Lifecycle Hooks각 vue 컴포넌트 인스턴스는 생성될 때 초기화 단계를 거친다.생명주기 순서를 간략하게 설명하자면 , 다음과 같다.vue2 와 vu3 의 차이는 위와 같다.reactive의 주요 특징객체 기반 반응형 상태 관리: reactive는 주로 객체 상태를 반응형으로 만들 때 사용한다.자동 추적 및 업데이트: reactive로 만든 상태는 Vue의 반응형 시스템에 의해 자동으로 추적되고, 관련 DOM이나 컴포넌트가 자동으로 업데이트된다.직관적: reacti.. 2024. 6. 16. [vue3] Quasar CLI (with vite) 사용해보기 안녕하세요,날먹하고 싶은 윾진입니다.FE... 날먹할 순 없을지, 이리저리 살펴보다 Quasar를 발견했습니다.사실 나온지는 꽤 됐고, 유명하지만 나만 모름 ㅋㅋ암튼 Quasar 얼마나 쌈@뽕한지 한번 알아봅시다. QuasarQuasar 공식 문서vue.js 기반 MIT 라이선스 오프 소스 프레임워크.다양한 유형의 반응형 웹 , 앱을 빠르게 만들 수 있음.SPAs (싱글 페이지 앱)SSR (서버 측 렌더링 앱) (+ 선택적 PWA 클라이언트 takeover)PWAs (프로그레시브 웹 앱)BEX (브라우저 확장)모바일 앱 (Android, iOS, …) Cordova 나 Capacitor를 통해다중 플랫폼 데스크톱앱 (Electron 사용)이 모든걸 Quasar에서 지원한다고?완전 럭키퀘이사잖아 ? 🍀?.. 2024. 6. 13. [Vue.js] 컴포넌트 선언 방법 - 2가지 방법 컴포넌트를 등록하고 사용하기 - 2가지 방법1. 하나의 파일에서 컴포넌트 선언하는 방법2. 전역에서 컴포넌트를 사용할 수 있도록 선언해주는 방법 방법 1: 하나의 파일에서 컴포넌트를 선언하는 방법Given..) App.vue파일에서 Home.vue 파일 사용하고자 함. * App.vue ↓ {{ title }} {{ count }} 추가 * Home.vue ↓(App.vue파일과 동일 depth에서 생성) {{ homeTitle }} After...) App.vue ↓ {{ title }} {{ count }} 추가 => 코드 설명:import : 외부에 만들어져 있는 Vue파일을 안에 가져올 때HomeComponent: 파일명과 동일하.. 2024. 6. 10. [Vue.js] 1. Vue.js란? 1. 대제목 : Vue.js란?1 - 1) MVVM 모델에서의 Vue1 - 2) 기존 웹 개발 방식(HTML, JavaScript)1 - 3) Reactivity 구현 1 - 1) Vue는 무엇인가? (Vue의 구동 원리에 대하여...)Vue : MVVM 패턴의 뷰모델 레이어에 해당하는 화면단 라이브러리MVVM 아키텍처Vue.js는 MVVM(Model-View-ViewModel) 아키텍처를 따름MVVM이란...↓Model: 애플리케이션의 데이터 상태를 나타냅니다.View: 사용자 인터페이스(UI)를 나타냅니다.ViewModel: View와 Model 사이의 중간 계층으로, 데이터 바인딩 및 DOM 업데이트를 관리합니다.그림으로 이해해보자 :3[그림 1] View : 브라우저에서 사용자에게 비춰지는 .. 2024. 6. 3. 이전 1 다음
