[Vue.js] 옵션의 구성

 

 

 

 

[고양이도 할수있는 Vue.js] 

section 06 옵션의 구성

See the Pen Vue.js by jeongahlee (@jeongahlee) on CodePen.

메서드	시점
beforeCreate	인스턴스가 생성되고, 리액티브 초기화가 일어나기 전
created	인스턴스가 생성되고, 리액티브 초기화가 일어난 후
beforeMount	인스턴스가 마운트되기 전
mounted	인스턴스가 마운트된 후
beforeUpdate	데이터가 변경되어 DOM에 적용되기 전
updated	데이터가 변경되어 DOM에 적용된 후
beforeDestroy	Vue 인스턴스가 제거되기 전
destroyed	Vue인스턴스가 제거된 후
errorCaptured	임의의 자식 컴포넌트에서 오류가 발생했을 때

 

 

*created : 이 라이프 사이클 훅이 호출될 때는 아직 DOM이 구축되지 않은 상태입니다.

따라서 인스턴스 자신을 나타내는 this에는 접근할 수 있지만, $el과 getElementById() 등을 사용한 DOM 접근은 불가능합니다.

 

*mounted :  인스턴스의 상태를 사용해서 DOM을 만든 직후에 호출됩니다. 

따라서 인스턴스 내부 템플릿의 $el과 getElementById()를 사용할 수 있습니다.

다만, 모든 자식 컴포넌트가 마운트되었다는 것은 보증하지 않습니다.

 

 

 

• Vue.js의 경우 DOM 구조 본체는 자바스크립트 데이터로 되어 있습니다.
• 디렉티브 값은 자바스크립트 식으로 되어 있습니다.
• HTML 코딩을 위해 컴포넌트를 사용하면 좋습니다.
• 필요한 데이터와 메서드는 옵션으로 정의합니다.
• new Vue()는 한 개만 만들고, 컴포넌트로 UI를 구축합니다.