뷰3 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. 001. Vue.js CDN을 통해 Vue.js 체험 및 뷰 속성 개념 Hello Vue.js 출력하기 CDN : https://cdn.jsdelivr.net/npm/vue/dist/vue.js {{message}} Vue인스턴스를 새로 생성한 후 data에 message 값을 넣어 위쪽 id="app"엘리먼트를 통해 {{message}}값을 전달합니다. 여기서 뷰 인스턴스 생성자 new Vue( ) 일때 Vue( ) Vue.js 라이브러리를 로딩하고 나면 접근 가능합니다. 사용하는 이유는 필요한 기능들을 미리 정의해 놓고, 사용자가 재정의 하여 편리하게 사용하기 위해입니다. 생성자란? 자주사용하는 옵션과 기능들을 미리저장 기존에 포함된 기능과 더불어 기존 기능을 확장하여 사용 객체 지향 프로그래밍의 객체 정의 방식 뷰 인스턴스 옵션 속성 data, el, template .. 2019. 11. 21. 이전 1 다음
