뷰 인스턴스(Vue Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다.
<html>
<head>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="http://cdn.hsdelivr.net/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js'
}
})
</script>
</body>
</html>
new Vue부분이 인스턴스이고 el와 data는 속성이다.
뷰 인스턴스 생성자
new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 하고, Vue 생성자는 뷰 라이브러리를 로딩 후 접근할 수 있다.
생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위함입니다.
뷰 인스턴스 옵션 속성
인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미한다.
위의 코드를 예로 하면 data라는 미리 정의된 속성을 사용하여 그 안에 message라는 새로운 속성을 추가하고 Hello, Vue.js 라는 값을 주었을 뿐이다. el 속성 역시 미리 정의되어 있으며 뷰로 만든 화면이 그려지는 시작점을 의미합니다.
뷰 인스턴스로 화면을 렌더링할때 화면이 그려질 위치의 돔 요소를 지정해 주어야 한다.
속성 설명
- template
화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성
뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
- methods
화면 로직 제어와 관계된 메서드를 정의하는 속성
마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있다.
- created
뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성
'JavaScript > Vue.js' 카테고리의 다른 글
| Vue Component(뷰 컴포넌트) (0) | 2021.01.06 |
|---|---|
| Vue Instance life cycle(뷰 인스턴스 라이프 사이클) (0) | 2021.01.05 |
| Vue 개발환경 설정 (0) | 2021.01.05 |
| Vue의 특징 (0) | 2021.01.05 |
| Vue 소개 (0) | 2021.01.05 |
댓글