반응형
뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위
뷰 인스턴스 생성
new Vue({
...
})new Vue() 생성자
Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있음.
생성자에 뷰로 개발할때 필요한 기능들을 미리 정의해놓고 그 기능을 재정의하여 편리하게 사용자들이 사용할 수 있음
뷰 인스턴스 옵션 속성
뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미
- el : 뷰로 만든 화면이 그려지는 시작점을 의미. 뷰 인스턴스로 화면이 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정
- template : 화면에 표시할 HTML, CSS등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있음
- methods : 화면 로직 제어와 관계된 메서드를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있음
- created : 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성
뷰 인스턴스의 유효범위
인스턴스 유효범위?
뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타난다. 이를 인스턴스의 유효 범위라고 한다. (el 속성과 밀접한 관계가 있음)
new Vue()로 인스턴스를 생성하고 나서 화면에 인스턴스 옵션 속성을 적용하는 과정
- 뷰 라이브러리 파일 로딩
- 인스턴스 객체 생성(옵션 속성 포함)
- 특정 화면 요소에 인스턴스를 붙임
- 인스턴스 내용이 화면 요소로 변환
- 변환된 화면 요소를 사용자가 최종 확인
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Sample</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script>
new Vue({
el : "#app",
data : {
message : "Hello Vue.js!"
}
})
</script>
</body>
</html>이 코드에서 인스턴스의 유효 범위는 html<div id="app"> .. </div> 안이다.
따라서 {{message}}가 div 범위를 벗어나면, {{message}}가 그대로 출력되게 된다.
반응형
'프로그래밍 노트 > Vue' 카테고리의 다른 글
| Vuex란? (0) | 2019.10.17 |
|---|---|
| 뷰(Vue) 라우터(Router) (0) | 2019.09.30 |
| 뷰(Vue) 컴포넌트(Component) 통신 (0) | 2019.09.30 |
| 뷰(Vue) 컴포넌트(Component) (0) | 2019.09.24 |
| 뷰 라이프사이클 (Vue lifecycle) (1) | 2019.09.23 |
