코딩하는 둥둥

[ Vue.js 시작하기 ] 02. 인스턴스 본문

Frontend/Vue.js 시작하기 - Age of Vue.js

[ Vue.js 시작하기 ] 02. 인스턴스

둥둥 2022. 9. 15. 12:53
728x90
inflearn에서 수강 한 장기효(캡틴판교)님의 강의🔗정리입니다.

인스턴스 소개

https://joshua1988.github.io/vue-camp/vue/instance.html

 

Instance | Cracking Vue.js

뷰 인스턴스 인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드입니다. 인스턴스 생성 인스턴스는 아래와 같이 생성할 수 있습니다. 인스턴스를 생성하고 나면 아래와 같이 인스턴스 안에

joshua1988.github.io

 

뷰 인스턴스

뷰로 개발할 때 필수로 생성해야 하는 코드이자 단위

 

인스턴스 생성
1
new Vue();
 cs

 

인스턴스 생성 시 인스턴스 안에 어떤 속성과 API가 있는지 콘솔 창에서 확인이 가능하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- vue.js 스크립트 -->
    <script>
        var vm = new Vue(); // vm : viewModel의 약자
    </script>
</body>
</html>
 cs

→ 인스턴스 안에는 미리 정의되어 있는 속성과 메서드(API)들이 있기 때문에 이 기능들을 이용하여 빠르게 화면을 개발 가능하다.

인스턴스와 생성자 함수

생성자 함수

함수의 시작이 대문자일 경우 생성자 함수가 생성된다.

1
2
3
4
5
6
7
8
9
10
11
function Person(name, job){ // 함수의 시작이 대문자 == 생성자함수
    this.name = name;
    this.job = job;
}
//- undefined
 
var p = new Person('kavin', 'dev');
//- undefined
 
p
// Person {name: 'kavin', job: 'dev'}
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
function Vue(){ // 1.logText라는 함수를 Vue함수에 먼저 정의
    this.logText = function(){
        console.log('hello');
    }
}
//-undefined
 
var vm = new Vue(); // 2.vm으로 new Vue를 생성(생성자함수로 객체 생성)
//- undefined
 
vm.logText(); // 3.객체 안에 미리 정의한 함수 존재 -> 매번 정의할 필요 없이 미리 정의된것을 사용할수 있음
VM197:3 hello
//- undefined
 cs
  1. logText라는 함수를 Vue함수에 먼저 정의
  2. vm으로 new Vue를 생성(생성자 함수로 객체 생성)
  3. 객체 안에 미리 정의한 함수 존재 -> 매번 정의할 필요 없이 미리 정의된 것을 사용할 수 있음

→ 이러한 과정을 통해 Vue에서 API와 속성들을 정의해놓고 가져다 쓰거나 재사용하는 패턴을 가지고 있으며, 이것이 new Vue를 사용하는 이유이다.

인스턴스 옵션 속성

인스턴스 안에서 사용할 수 있는 속성과 API
1
2
3
4
5
6
7
8
new Vue({
  el: ,
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});
 cs
  • el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그)
더보기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <div id="app"></div>
 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- vue.js 스크립트 -->
    <script>
        var vm = new Vue({
            el: '#app', // <body>안에서 app이라는 이름을 가진 태그를 찾아 인스턴스를 붙이겠다.
                       // element가 있으므로써 div안에서 사용할수 있다.(없을경우 이 안에서 데이터를 정의해도 사용 불가.)
            data: {
                message: 'hi'
            }
        });
    </script>
</body>
 cs

el을 이용해 <body> 안에서 app이라는 이름을 가진 태그를 찾아 인스턴스를 붙일 수 있어 div안에서 사용할 수 있다.

만약 el이 없을 경우 이 안에서 데이터를 정의해도 사용이 불가

  • template : 화면에 표시할 요소 (HTML, CSS 등). 컴포넌트가 표현되는 마크업이나 스타일을 의미
  • data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성
  • methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
  • created : 뷰의 라이프 사이클과 관련된 속성
  • watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성
객체 추가 방법
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<body>
    <div id="app"></div>
 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- vue.js 스크립트 -->
    <script>
 
        // new Vue라는 인스턴스 생성후 options 객체 추가 방법
        // var options = {
        //     el: '#app',
        //     data: {
        //         message: 'hi'
        //     },
        //     method: {
                
        //     }
        // }
        // var vm = new Vue(options); 
 
        // 위 방법보다 ↓ 객체 리터럴 방법이 가독성이 더 뛰어남
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hi'
            },
            method: {
 
            }
        }); 
    </script>
</body>
 cs

new Vue인스턴스 생성 후 options 객체를 추가하는 방법(변수로 구분)보다 객체를 통째로 안에 넣어주는 객체 리터럴 방법이 가독성이 더 뛰어나고 이 방법을 공식문서에서도 사용하고 있다.

 

📌 생성자 안에 들어가는 인자는 객체.
객체 표기법으로 객체가 정의된 후 들어가는 것 주의! (추가 시 마지막에 , 찍는 것 주의)
728x90

'Frontend > Vue.js 시작하기 - Age of Vue.js' 카테고리의 다른 글

[ Vue.js 시작하기 ] 05. 컴포넌트 통신 방법 - 응용  (0) 2022.09.26
[ Vue.js 시작하기 ] 04. 컴포넌트 통신 방법 - 기본  (0) 2022.09.26
[ Vue.js 시작하기 ] 03. 컴포넌트  (0) 2022.09.26
[ Vue.js 시작하기 ] 01. Vue.js 소개  (0) 2022.09.15
[ Vue.js 시작하기 ] 00. 개발 환경 설정  (0) 2022.09.15
'Frontend/Vue.js 시작하기 - Age of Vue.js' Related Articles more