반응형
<인스턴스의 옵션과 속성>
생성자함수로 재사용 할수 있는 옵션과 속성
옵션들은 다음과 같다 ↓
객체는 key, value 형태로 들어오는게 중요하다.
new Vue({
el: ,
template: ,
data:,
methods: ,
created: ,
watch: ,
});el: 인스턴스가 그려지는 화면의 시작점 (특징 HTML 태그)
template: 화면에 표시할 요소 (HTML, CSS등)
data: 뷰의 반응성 (Reactivity) 가 반영된 데이터 속성
methods: 화면의 동작과 이벤트 로직을 제어하는 메서드
created: 뷰의 라이프 사이클과 관련된 속성
watch: data에서 정의한 속성이 변화했을 때 추가 동작을 수행할수 있게 정의
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
//options라는 객체를 정의
var options = {
el: '#app',
data:{
message: 'hi'
},
methods:{
},
}
var vm = new Vue(options);
</script>
</body>
</html>
위의 코드를 객체 리터럴 ↓ (객체 정의 형식 변경)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
//var options =
var vm = new Vue({
el: '#app',
data: {
message: "안녕"
},
methods: {
},
created: function () {
},
});
</script>
</body>
</html><뷰 컴포넌트>
컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능이다.
컴포넌트 기반으로 화면을 개발하게 되면 재사용성이 올라가고 빠르게 화면을 제작할 수 있다.
화면의 영역을 구분하여 개발하는것. 이라고 이해하면 좋다.
영역을 구분했을때 컴포넌트간의 관계가 생긴다.
인스턴스를 생성하면 root 컴포넌트가 된다.
root가 상위 컴포넌트, 컴포넌트가 하위 컴포넌트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<app-header></app-header>
<app-content></app-content>
<app-footer></app-footer>
</div>
<script>
//전역 컴포넌트
Vue.component('app-header', {
template: '<h1>header</h1>'
});
Vue.component('app-content', {
template: '<div>content</div>'
});
// Vue.component('컴포넌트 이름', 컴포넌트 내용);
new Vue({
el: '#app',
//지역 컴포넌트 등록 방식
components: {
// '컴포넌트 이름': 컴포넌트 내용,
'app-footer':{
template: '<footer>footer</footer>'
}
}
});
</script>
</body>
</html>반응형
'vue.js > vue.js 2' 카테고리의 다른 글
| 9. 뷰 라우터 소개와 설치 (0) | 2022.07.09 |
|---|---|
| 6. 전역 컴포넌트 | 지역 컴포넌트 | 컴포넌트와 인스턴스의 관계 | Props 속성 (0) | 2022.07.07 |
| 4. Vue.js와 vue개발자 도구 | 인스턴스 | 생성자함수 (0) | 2022.07.04 |
| 3. Reactivity 코드 라이브러리화 하기 | 즉시실행함수 (0) | 2022.07.04 |
| 2. vue.js의 Reactivity(반응형) 구현 | Object.defineProperty() 객체의 동작을 재정의 하는 API | get: 속성에 접근했을때의 값 정의, set: 속성의 값을 할당했을때의 값 정의 (0) | 2022.07.04 |