이번 시간에는 가볍게 문법과 개념에 대해 훑어보려 합니다! 주요 개념들을 문법과 함께 살펴보도록 하겠습니다.😎
Vue Instance
인스턴스는 Vue.js로 화면을 개발하기 위해 생성해야 하는 필수 단위이다.
Vue Instance 생성자
생성자 함수를 사용하여 인스턴스를 생성하는 방법이다.
new Vue({
// instance option properties
});
Vue 객체를 생성할 때 아래와 같이 data, template, el, methods, life cycle hook 등 옵션 속성을 포함할 수 있다.
new Vue({
// instance option properties
template: "",
el: "",
methods: {}
// ...
});
Vue Instance 라이프싸이클 초기화
- 인스턴스(객체)가 생성될 때 수행되는 초기화 작업
- 데이터 관찰템플릿 컴파일 DOM에 객체 연결
- 데이터 변경 시 DOM 업데이트
이런식으로 초기화 작업 외, 개발자가 의도하는 커스텀 로직을 작성할 수 있다.
vm이란 ViewModel의 약자라고 한다.
new Vue({
data: {
a: 1
},
created: function() {
// this 는 vm 을 가리킴
console.log("a is: " + this.a);
}
});
Vue Components
화면의 영역을 일정한 단위로 쪼개 분리시켜 재활용 가능한 형태로 관리하는 것이 컴포넌트이다.
컴포넌트 등록
<div id="app">
<my-component></my-component>
</div>
new Vue({
el: "#app",
// 컴포넌트 등록 코드
components: {
// '컴포넌트 이름': 컴포넌트 내용
"my-component": {
template: "<div>A custom component!</div>"
}
}
});
Global Component
전역 컴포넌트 등록 방식이다.
Vue.component('my-component', {
// 컴포넌트 내용
template: '',
...
})
'Programming > Vue.js' 카테고리의 다른 글
Vue3 변경점을 정리해보자 1탄 (기본) (0) | 2022.05.24 |
---|