Component

Web/Vue.js

[Vue.js] 컴포넌트 (Component) 예제

2022.03.24

컴포넌트(Component) 조합하여 화면을 구성할 수 있는 블록을 뜻한다. 화면 영역을 각각 Header, Content, Footer, Aside, Main으로 구분한 것이다. 이를 아래와 같은 트리 형태로 나타낼 수 있다. 트리 구조로 컴포넌트를 살펴보면 컴포넌트가 어떻게 구성되어있는지 더 알아보기 쉽다. Root는 화면 전체 영역을 의미한다. 화면 전체를 Header, Content, Footer 세 개의 컴포넌트로 분할하였다. 이후 Content 컴포넌트에서도 Aside, Main 두 개의 컴포넌트로 분할한다. Content를 부모 컴포넌트 또는 상위 컴포넌트라 하고, Aside, Main을 자식 컴포넌트 또는 하위 컴포넌트라 말한다. 이는 Root와 Header, Content, Footer ..

Web/Vue.js

[Vue.js] 인스턴스 (Instance) 예제

2022.03.22

인스턴스(Instance) Vue에서 제공하는 API와 속성으로, 뷰로 개발하기 위하여 필수적으로 생성해야 한다. {{ message }} new Vue()로 뷰 인스턴스를 생성할 때의 Vue를 생성자라고 한다. (생성자 인자에는 객체가 들어간다.) 위 예제에서는 뷰 인스턴스 옵션 속성에 el 속성과 data 속성을 사용하였다. 이 외에 template, methods, created, watch 속성 등 여러 속성들이 뷰 인스턴스 옵션 속성으로 미리 정의되어 있다. el 속성 값을 지정해주어야 태그 안 Vue의 기능과 속성들이 유효해진다. el 속성으로 뷰 인스턴스가 그려질 지점을 설정하는 것이다. 참고로 el 속성 값에 html이나 body를 넣는 경우 콘솔 창에 아래와 같은 경고가 발생하고, 제대로..

[Vue.js] 컴포넌트 (Component) 예제

[Vue.js] 인스턴스 (Instance) 예제

티스토리툴바