728x90
모든 예제 코드는 github에 있습니다.
2. 인스턴스
인스턴스 소개
- 인스턴스란 Vue로 개발할때 필수로 생성해야 하는 단위라고 생각하면 된다.
new Vue()로 생성하면 변수에 인스턴스를 할당할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Instance</title>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
// 인스턴스
el: "#app",
data: {
message: "hi",
},
});
</script>
</html>인스턴스와 생성자 함수
-
- 생성자 함수를 작성함으로써 개체를 정의합니다.
- new 키워드를 사용하여 개체의 인스턴스를 만듭니다.
개체 형식을 정의하기 위해 개체 이름, 속성, 메소드를 지정하는 함수를 만들어야 한다.
이때 중요한 것은 함수의 인자로 전달받은 값을 개체의 속성에 할당하기 위해
this를 사용해야 한다.즉, 함수를 이용해 인스턴스를 생성하는 방법을 생성자 함수라고 한다.
function Person(name, age){ this.name = name; this.age = age; } const person = new Person("rutgo", 28); console.log(person.name); console.log(person.age) function Vue(el){ this.el = el; this.logText = function () { console.log('hello'); } } const vm = new Vue('#app'); console.log(vm.el); // #app vm.logText(); // hello
인스턴스 옵션 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Instance Option</title>
</head>
<body>
<div id="app1">{{message}}</div>
<div id="app2">{{message}}</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const options = {
el: "#app1",
data: {
message: "hi1",
},
};
const vm1 = new Vue(options);
// Vue가 추구하는 방식
const vm2 = new Vue({
el: "#app2",
data: {
message: "hi2",
},
});
</script>
</html>- 이렇게 하는 것과 Vue를 생성하는 것과 똑같지만, Vue에서 속성 추가에서 추구하는 방법은 인자에다가 바로 넣는것 이다.
- el : 인스턴스가 그려지는 화면의 시작점(HTML 태그)
- template : 화면에 표시할 요소
- data : 뷰의 반응성이 반영된 데이터 속성
- methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
- created : 뷰의 라이프 사이클과 관련된 속성
- watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의
728x90
728x90
'Lecture > [인프런] Vue.js 시작하기 - Age of Vue.js' 카테고리의 다른 글
| 5. 컴포넌트 통신 방법 - 응용 (0) | 2020.07.05 |
|---|---|
| 4. 컴포넌트 통신 방법 - 기본 (0) | 2020.07.05 |
| 3. 컴포넌트 (0) | 2020.07.05 |
| 1. Vue.js 소개 (0) | 2020.07.05 |
| 0. 개발환경설정 (0) | 2020.07.05 |
