Vue는 MVVM 패턴을 이용하는 프레임워크이며, 이 중 View만을 위한 Model인 VM(ViewModel)에 집중
뷰View 는 사용자에게 보여지는 브라우저 화면(html) 을 의미
➡️ DOM을 통해 자바스크립트를 조작
ViewModel에 해당하는 뷰Vue 인스턴스는 DOM Listners(이벤트 핸들링) / Data Bindings(데이터 변환)를 통해 자바스크립트 코드를 실행하고 화면 View에 반영
Object.defineProperty(대상 객체, 객체의 속성, { 새로 정의 또는 수정하려는 속성, get : , set : })
Vue를 사용하면 변경된 데이터를 화면에 적용해주기가 용이하다.
Reactivity 코드 라이브러리화 하기
📘 즉시 실행 함수 표현
(IIFE, Immediately Invoked Function Expression)
new Vue()
-> 생성자 함수로 인스턴스를 만든다.new Vue({
el: ,
template: ,
data: ,
methods: ,
created: ,
watch: ,
});
- el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그)
- template : 화면에 표시할 요소 (HTML, CSS 등)
- data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성
- methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
- created : 뷰의 라이프 사이클과 관련된 속성
- watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성
인스턴스 안에 들어가는 객체는 따로 변수로 지정하지 않고 리터럴 형식으로 바로 값을 대입해주는 것이 가독성이 높다.
인스턴스를 생성하면 Root 컴포넌트가 된다.
( crome extenstion - Vue Devtool 화면 )
vue를 사용해 화면의 영역을 나누어 개발할 수 있다.
전역 / 지역 컴포넌트를 만들 수 있는데, 실무에서 전역은 거의 사용하지 않는다(⭐️ 지역 컴포넌트로 만들었을 때 하위 컴포넌트 조회가 가능).
전역 컴포넌트는 플러그인, 라이브러리 등 전역에서 사용이 필요할 때만 만든다.
지역 컴포넌트 등록하기
⭐️ 속성 이름이 components! s 붙이는 것 주의 ( 보통 여러 개의 컴포넌트를 만들기 때문 )
new Vue({
el: '#app',
//지역 컴포넌트 등록
components: {
// '컴포넌트 이름': 컴포넌트 내용,
'app-footer' : {
template: '<footer>footer</footer>'
}
}
})
💡 배경지식으로 알고 있기 : 전역 컴포넌트는 인스턴스를 생성할 때마다 자동으로 등록이 되어있고, 지역 컴포넌트는 새로 등록해줘야함
(콘솔 에러메세지 캡처 -지역 컴포넌트로 만든 app-footer)
그러나 앞서 말했듯 실제 서비스를 개발할 때는 인스턴스는 하나를 생성하고 그 안에서 컴포넌트를 더해나가는 식으로 진행된다!