본문 바로가기
  • 기억의 유한함을 기록의 무한함으로✍️            예비 개발자가 꿈꾸는 공간 여기는 안나의 개발 블로그 💻

Vue.js 입문하기2

[Vue.js 입문하기] 뷰 컴포넌트 💭뷰 컴포넌트가 무엇인지 알아보고 전역 컴포넌트와 지역컴포넌트의 차이에 대해 알아보자. ❗뷰 컴포넌트 화면의 영역을 구분하여 코드로 관리하는 뷰의 기능이다. 재사용성이 올라가고 빠르게 화면을 제작하기 위해서 컴포넌트로 화면을 관리한다. 컴포넌트 생성시 각 컴포넌트 간의 관계가 생성된다. 코드에서 인스턴스를 생성하면 개발자 도구 vue에서 Root 컴포넌트로 인식 개발자도구 ❗ 전역 컴포넌트 생성하기 Vue.component 를 사용하여 컴포넌트를 생성하게 되면 전역 컴포넌트를 생성된다. 코드 결과 app-header 컴포넌트가 Root 아래 추가 됨을 확인 할 수 있다. Root는 상위 컴포넌트 app-header는 하위 컴포넌트이다. ❗ 지역 컴포넌트 생성하기 전역 컴포넌트로 사용할 경우 사용하지 않는.. 2022. 7. 21.
[Vue.js 입문하기] Vue의 핵심, Reactivity (반응성) 💭 기존의 웹 개발 방식인 Html과 JavaScript와 비교하여 Vue의 Reactivity를 구현하는 방법을 아주 간단히 알아보자! ❗Html, JavaScript로 웹 만들어보기 변수 str 를 생성하고 화면에 출력한 후 str 값을 변경했을 때 • html 파일에서 ! 를 쓴 후 Tab 키를 누르면 아래와 같은 hmtl 양식을 손쉽게 작성할 수 있다. hi hello 결과 • 아래의 사진과 같이 str 출력이 값이 변경되기 전의 값을 출력하고 있음을 확인할 수 있다. ❗ Vue의 Reactivity(반응성) 웹 만들기 변수 str 를 생성하고 화면에 출력한 후 str 값을 변경했을 때 • 변경된 str 값이 바로 화면에 적용되는 반응성 웹 • Object.defineProperty() API를 .. 2022. 7. 21.
반응형