Vue.js 인스턴스 & 컴포넌트
인스턴스 생성 Vue.js의 모든 앱은 인스턴스를 만드는 것부터 시작됩니다. 인스턴스를 생성하고, 인스턴스 안에 el속성으로 화면과 뷰 인스턴스를 연결하고 data 속성으로 화면에 표시될 메시지를 출력할수 있습니다. 인스턴스 속성 뷰 인스턴스를 생성할때, data, el, template 등의 속성을 지정하여 정의할 수 있습니다. el 속성은 인스턴스가 주입되는 화면 컴포넌트와 연결되며, data 속성은 데이터를 전달하기 위해 사용됩니다. 인스턴스 유효 범위 인스턴스의 유효범위는 el 속성에 지시한는 <div> 태그 내로 국한됩니다. 아래와 같이 message가 인스턴스 범위를 벗어나면 data의 메시지는 정상적으로 출력 되지 않습니다. 뷰인스턴스 라이프사이클 뷰 인스턴스의 라이프사이클은 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed 충 8단계를 가지며 아래의 그림과 같습니다. 컴포넌트 컴포넌트는 화면을 블록 단위로 구조화하여 일정 단위로 쪼개서 재활용 가능한 형태(</>태그)로 관리하며, 직곽적으로 이해하기 편리합니다. 전역등록 Vue 생성자에서 componet 함수를 호출하여 전역 컴포넌트를 등록할 수 있습니다. < html > < head > < title > Vue Component </ title > </ head > < body > < div id = "app" > < my-component > </ my-component > </ div > < script src = "https://unpkg.com/vue@2.5.16/dist/vue.js" > </ script > &l
