반응형 뷰3 Vue.js refs로 자식컴포넌트, html 엘리먼트 접근 refs 자식컴포넌트나 일반적인 html 엘리먼트에 직접 접근 가능(getElimentById, querySelector 등 과 유사) 컴포넌트가 랜더링이 된 이후 적용되기 때문에 반응형으로 구성하기 위한 computed, template 에서 사용 제약 ref 속성과 $refs 키워드를 통해서 사용 ... // $refs를 사용해서 접근 this.$refs.child_component this.$refs.test_input 자식 컴포넌트 샘플 코드 테스트용 자식 컴포넌트 코드를 간단하게 작성한다 Child 클릭 이벤트 버튼 {{ msg }} 부모 컴포넌트 샘플 코드 부모컴포넌트가 mounted 되었을 때 간단히 엘리먼트 정보를 콘솔로 한번 조회하고, input 엘리먼트에 focus를 준다. 그리고 "테.. 2022. 4. 2. Vue.js props 사용 샘플 props 부모컴포넌트에서 자식컴포넌트로 데이터를 전달할 때 사용 자식컴포넌트에서 전달받을 데이터를 "props"로 선언 부모컴포넌트에서 "v-bind:" 또는 ":" 를 사용하여 데이터 전달 // 부모컴포넌트 데이터 전달 // 자식컴포넌트 props 선언 props: { message: String, } 부모 컴포넌트 샘플 코드 자식 컴포넌트 샘플 코드 string: {{ message }} number: {{ number }} bool: {{ bool }} array: {{ array }} user: {{ user.name }}, {{ user.age }} valid: {{ valid }} 테스트 결과 화면 2022. 4. 2. Vue.js란 무엇인가? - Hello World Vue.js 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크 MVVM패턴의 ViewModel에 해당하여, UI코드와 데이터제어 제어 로직을 분리 SPA(Single Page Application)를 구축하는데 이용 가능 View(html DOM): 사용자에게 보이는 화면. Model(JS): 데이터를 담는 용기, 보통 서버에서 가져온 데이터를 javascript 객체로 저장 ViewModel: View와 Model의 중간 영역으로 DomListener와 DataBinding을 제공하는 영역 DOM: HTML 문서에 들어가는 요소(tag, class, attribute 등)의 정보를 담고 있는 데이터 트리 DOM Listener: DOM의 변경에 대한 즉각.. 2022. 3. 16. 이전 1 다음 반응형
