vue4 004. 상 하위 컴포넌트 관계 상하위 컴포넌트 관계 하위 컴포넌트에서는 상위 컴포넌트로 이벤트만 전달합니다. 상위 컴포넌트에서 하위 컴포넌트로는 props만 전달합니다. ※ props속성 : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성 props 속성 정의 하는 방법 Vue.component('child-component',{ props : ['props 속성 이름'] }); 상위 컴포넌트의 HTML 코드에 등록된 child-component 태그에 v-bind속성을 추가한다. 예제 코드 html을 확인하면 이런값이 나오는 것을 확인 할 수 있습니다. 하위 컴포넌트에서 상위 컴포넌트로 이벤트 전달하기 $emit( )을 이용하여 이벤트를 발생합니다. this.$emit('이벤트명'); v-on: 속성을 이용한 이.. 2019. 11. 21. 003. 뷰 컴포넌트(Component) 컴포넌트란? 컴포넌트란 조합하여 화면을 구성할 수 있는 블록입니다. 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리합니다. 코드를 재사용하기 편리합니다. 컴포넌트 간의 관계는 자료구조의 트리(Tree)모양과 유사합니다. 지역 컴포넌트 vs 전역 컴포넌트 지역컴포넌트 특정 인스턴스에서만 유효한 범위를 갖습니다. 전역 컴포넌트 여러 인스턴스에서 공통으로 사용할 수 있습니다. 뷰로 접근 가능한 모든 범위에서 사용할 수 있습니다. 컴포넌트 등록하기 전역컴포넌트 Vue 변수를 이용하여 등록합니다. Vue.component( )를 호출하여 수행합니다. 형식은 아래와 같습니다. 전역 컴포넌트 표시 전역 컴포넌트를 활용한 예시 코드 컴포넌트 등록 지역 컴포넌트 인스턴스에 components속성을 추가합니.. 2019. 11. 21. 002. Vue의 라이프 싸이클 뷰 인스턴스 라이프 사이클 1. 인스턴스 생성 new Vue( ) 이벤트 및 라이프 사이클 초기화 → beforeCreate → 화면에 반응성 주입 → created → el, template 속성 확인 → template 속성 내용을 render로 변환 → beforeMount → $el 생성 후 el속성 값을 대입 → mounted 2. 인스턴스를 화면에 부착 인스턴스의 데이터 변경 → beforeUpdate → 화면 재 렌더링 및 데이터 갱신 → updated 3. 인스턴스 내용 갱신 인스턴스 접근 가능 → beforeDestoroy → 컴포넌트, 인스턴스, 디렉티브등 모두 해제 → destroyed → 인스턴스 소멸 4. 인스턴스 소멸 (끝) 각 분기 자세한 설명 beforeCreate 인스턴스가.. 2019. 11. 21. 000. Vue.js란? Vue란 무엇인가? 사용자 인터페이스를 만들기 위한 Progressive(점진적) 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있습니다. 또한 명시적 렌더링(코어 라이브러리) + 컴포넌트 기반 + 클라이언트 사이드 라우팅(프레임워크 기능) + 상태관리 + 빌딩 시스템을 할 수 있습니다. Vue의 장점 배우기가 쉽다, 리액트와 앵귤러에 비해 성능이 우수하고 빠릅니다. 리액트의 장점과 앵귤러의 장점을 갖고 있습니다. 데이터 바인딩 + 가상 돔(Virtual DOM) Vue.js에서 사용하는 용어 설명 View, 화면 : 사용자에게 보이는 화면, 브라우저를 만나서 보여지는 최종적인 화면 DOM : HTML 문서에 들어가는요소 ex) 태그, 클래스, 속성 등 DOM Liste.. 2019. 11. 20. 이전 1 다음
