[인프런] 뷰 인스턴스
Instance | Cracking Vue.js
뷰 인스턴스 인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드입니다. 인스턴스 생성 인스턴스는 아래와 같이 생성할 수 있습니다. 인스턴스를 생성하고 나면 아래와 같이 인스턴스 안에 어떤 속성과 API가 있는지 콘솔 창에서 확인할 수 있습니다. 크롬 개발자 도구를 열고 Console 패널을 확인하면 아래와 같은 결과가 나옵니다. 이처럼 인스턴스 안에는 미리 정의되어 있는 속성과 메서드(API)들이 있기 때문에 이 기능들을 이용하여 빠르게 화면을 개발해나
joshua1988.github.io
인스턴스
: 뷰로 개발시에 필수로 생성해야 하는 코드
인스턴스 생성
<body>
<div id="app">
<!-- 인스턴스 영역 -->
<!-- 뷰의 기능과 속성들이 유효해짐 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"/></script>
<script>
// 인스턴스 생성
var vm = new Vue({
el : '#app', // 타겟 : aPP이란 id를 가진 태그를 찾아 인스턴스를 붙이겠다.
data : {
message : 'hi'
}
});
</script>
</body>꼭 el 속성에 인스턴스 영역을 지정해줘야 그 영역에서 뷰 사용이 가능하다.
- 인스턴스와 생성자 함수
뷰 사용시 미리 정의되어 있는 속성과 메서드(API)이 존재한다
그렇기 떄문에 우리들은 new Vue()를 통하여 사용이 가능하다
Using a Constructor Function
다른 방법으로, 다음 두 단계를 거쳐서 개체를 만들 수도 있습니다.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor
Object.prototype.constructor
인스턴스의 프로토타입을 만든 Object 함수의 참조를 반환합니다. 이 속성값은 함수 자체의 참조임을 주의하세요, 함수 이름을 포함하는 문자열이 아니라. 그 값은 1, true 및 "test"와 같은 원시(primitive) 값에 대해서만 읽기 전용입니다.
developer.mozilla.org
- 인스턴스 옵션 속성
- key : value 형식
※ 생성자안에 추가할 속성들은 객체 형태로 들어간다.
{
el : '#app',
data : {
message : 'hi'
}
}