뷰 인스턴스
인스턴스 생성하기
new Vue();new Vue를 사용하는 이유
- 매번 함수를 정의하는게 아니고 미리 정의된 함수를 사용 가능.
- 생성자 함수로 vue에서 api와 속성들을 정해놓고 가져다 쓰거나 재사용하는 패턴
생성자 함수
생성자 함수
함수의 메서드를 제공한다. 자바스크립트에서 모든 함수는 생성자 함수다. 출처:mdn web docs
function()
//name과 job을 인자로 받아서 이 사람의 정보들을 계속 인스턴스로 찍어낼 수 있다.
function Person(name, job){
this.name = name;
this.job = job;
}
//p라고 하는 객체에 넣음
var p = new Person('josh', 'developer')
//p를 찍어보면 Person 이라고 하는 객체가 생성되고 job과 name 하나의 내용이 생겨남
Person {name: 'josh', job: 'developer'}
job: "developer"
name:"josh"생성자 함수로 재사용할 수 있는 옵션 & 속성
인스턴스 안에서 사용할 수 있는 옵션들
el: 인스턴스가 그려지는 화면의 시작점 (특정 html 태그)templete: 화면에 표시할 요소 (html, css)data: 뷰의 반응성(Reactivity)가 반영된 데이터 속성methods: 화면의 동작과 이벤트 로직을 제어하는 메서드created: 뷰의 라이트 사이클과 관련된 속성watch: data에서 정의한 속성이 변화 했을때 추가 동작을 수행할 수 있다.
그리고 아래⬇️와 같이 표현한다.
new Vue({
el: "",
templete: "",
data: "",
methods: "",
created: "",
});뷰 컴포넌트
화면의 영역을 구분하여 개발할 수 있는 뷰의 기능
1. 코드의 재사용성이 높아진다.
2. 화면을 빠르게 제작 가능하다.
이미지 출처:Vue.js 공식사이트
컴포넌트 등록하기
인스턴스를 생성하면 기본적으로 root 컴포넌트가 된다.
<body>
<div id="app">
<app-header></app-header>
<app-content></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//전역 컴포넌트
//컴포넌트 생성 방법: Vue.component('컴포넌트 이름',컴포넌트 내용);
Vue.component('app-header',{
template: '<h1>Header</h1>'
});
Vue.component('app-content',{
template:'<div>content</div>'
});
var vm = new Vue({
el: '#app',
})
</script>
</body>
FE 개발자가 되기 위해 달리고 있어요 🏃♀️