반응형
1. 뷰 인스턴스란?
- 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위
- 인스턴스를 레고에 비유한다면 레고를 조립하는 기본 판
직전 게시글에서 작성한 코드를 예시로 들어볼게요.
<html>
<head>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({ // 인스턴스
el : '#app', // el태그
data : { // data속성
message: 'Hello Vue.js!'
}
});
</script>
</body>
</html>
2. 뷰 인스턴스 생성자
- new Vue()로 인스턴스를 생성할 때 생성자는 Vue
- Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근 가능
- 생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위함
3. 인스턴스가 화면에 적용되는 과정
1. 뷰 라이브러리 파일 로딩
2. 인스턴스 객체 생성(옵션 속성 포함)
3. 특정 화면 요소에 인스턴스를 붙임
4. 인스턴스 내용이 화면 요소로 변환
5. 변환된 화면 요소를 사용자가 최종 확인
예시 )
1) 뷰 라이브러리 파일이 로딩된다.
2) new Vue()로 뷰 인스턴스를 생성 [도화지] + 옵션 속성 (el, data)
3) 생성한 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점 지정 => #app 은 id가 app인 것 [그릴 위치]
4) data 속성에 message 값을 정의하여 화면에 {{ message }}와 연결(치환) [그릴 위치의 데이터(모양)]
5) 화면에 데이터가 뿌려진다.
4. 뷰 인스턴스 옵션 속성
- template : 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성
- methods : 화면 로직 제어와 관계된 메서드를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직 추가 가능
- created : 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성
* Do it! Vue.js 입문 책으로 공부하며 작성하는 글로 잘못된 정보가 있을 경우 댓글 달아주시면 감사하겠습니다 : )
반응형
'Vue.js' 카테고리의 다른 글
| [Vue.js] 뷰 컴포넌트란? | 전역 컴포넌트 | 지역 컴포넌트 (0) | 2021.09.06 |
|---|---|
| [Vue.js] 뷰 인스턴스 생명주기 | 라이프 사이클 (0) | 2021.09.05 |
| [Vue.js] Hello Vue.js 출력해보기 (0) | 2021.09.03 |
| [Vue.js] 뷰 개발자 도구(뷰 크롬 플러그인) 설치하기 (0) | 2021.09.02 |
| [Vue.js] Node.js 설치하기 (0) | 2021.09.01 |