jmmm_25

컴포넌트 간 통신과 유효 범위 뷰는 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다. 컴포넌트마다 자체적으로 고유한 유효 범위를 갖기 때문이다. 위는 한 컴포넌트에서 다른 컴포넌트의 값을 직접 참조하는 예제이다. my-component2 컴포넌트 내용에서 {{ cmp2Data }}는 my-component1 컴포넌트의 data.cmpData1를 참조하고 있다. 따라서 값 100이 화면에 표시되어야 하는데, 아무것도 표시하지 않는다. 그 이유는 my-component2 컴포넌트에서 my-component2 컴포넌트의 값을 직접 참조할 수 없기 때문이다. 즉, 컴포넌트의 유효 범위로 인해 다른 컴포넌트의 값을 직접 접근하지 못하기 때문에 나타난 결과이다. 상-하위 컴포넌트 관계 위와..

컴포넌트란? Component란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미한다. 컴포넌트 등록하기 전역 컴포넌트 지역 컴포넌트 전역 컴포넌트 등록 Vue.component('컴포넌트 이름', { //컴포넌트 내용 }); 전역 컴포넌트 등록하기 컴포넌트 등록 전역 컴포넌트를 등록하려면 HTML에서 사용할 태그 이름을 컴포넌트 이름으로 작성하고, 중괄호 {} 안에는 HTML 태그가 실제로 화면에서 그려질 때 표시될 내용(컴포넌트 내용)을 작성해야 한다. 컴포넌트의 이름을 my-componet로 작성하였고, 컴포넌트 내용으로는 ' 전역 컴포넌트가 등록되었습니다! ' 으로 작성되었다. 결론적으로 인스턴스가 생성된 후 화면에 그려질 때 실제 HTML 코드 모양은 다음과 같다. 컴포넌트 등록 ..

뷰 인스턴스 라이프 사이클 인스턴스의 생성 생성된 인스턴스를 화면에 부착 화면에 부착된 인스턴스의 내용이 갱신 인스턴스가 제거되는 소멸부착 부착 -> 갱신 구간은 데이터가 변경되는 경우에만 거치게 된다. beforeCreate 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계 data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에도 접근 불가 created data 속성과 methood 속성이 정의되었기 때문에 this.data 또는 this.fetchData()와 같은 로직들을 이용하여 data 속성과 methods 속성에 정의된 값에 접근하여 로직을 실행할 수 있습니다. 인스턴스가 화면 요소에 부착되기 전이기 때문에 template 속성에 ..