티스토리 뷰
Vue Instance
누구나 다루기 쉬운 Vue.js 프론트 개발(인프런) - Captain Pangyo 링크
인스턴스 소개
Vue.js를 이용하여 UI 화면을 개발하기 위해서는 아래 절차를 따른다.
Vue.js 라이브러리를 로딩했을 때 존재하는 Vue 생성자로 인스턴스를 생성해야 한다.
1 2 3 | var vm = new Vue({ //... }) | cs |
풀어서 얘기하면 Vue 라이브러리 로딩 후 접근 가능한 Vue라는 기존 객체에 화면에서 사용할 옵션(데이터, 속성, 메서드 등)을 포함하여 화면의 단위를 생성한다라고 보면 된다.
결론적으로 인스턴스는 뷰를 이용해서 개발하는데 가장 중요한 요소이며, 후반부에서 배우게 될 컴포넌트와도 밀접히 연관이 있는 기반 개념이다.
인스턴스 생성
Vue Instance 생성자
Vue 생성자로 인스턴스를 만드는 방법은 아래와 같다.
1 2 3 4 | // vm은 ViewModel을 뜻한다.(관행적인 코딩 컨벤션) var vm = new Vue({ // options }) | cs |
template : 화면에 나타나는 요소들(div, p, 버튼 등)과 추가적으로 데이터 바인딩에 관한 요소들이 들어간다.
el : 화면이 그려지는 시작점이다. element의 약자. el에 지정한 특정 태그 부터 화면이 그려진다고 보면 된다.
methods : 클릭하거나, http 요청 등에 대한 구현 메소드 등을 안에 선언할 수 있다.
created : 라이프사이클과 관련된 옵션으로 뒤에서 추가로 설명
1 2 3 4 5 6 7 8 9 10 11 | var vm = new Vue({ template: ..., el: ..., methods: { }, created: { } // ... }) | cs |
뒤에서 컴포넌트 학습하면서 이것에 대해 배운다.
1 2 3 4 5 6 7 8 9 10 11 | var MyComponent = Vue.extend({ // template, el, method와 같은 options 정의 template: `<p>Hello {{ message }}</p>`, data: { message: 'Vue.js !' } // ... }) // 위에서 정의한 내용 (template, data, ...)을 기본으로 하는 컴포넌트 생성 var myComponentInstance = new MyComponent() | cs |
Instance Lifecycle 초기화
뷰 객체가 생성될 때 아래의 초기화 작업을 수행한다.
데이터 관찰
템플릿 컴파일
DOM에 객체 연결
데이터 변경시 DOM 업데이트
위의 초기화 작업 외에도 개발자가 의도하는 커스텀 로직을 아래와 같이 추가할 수 있다.
created라는 옵션은 뷰 인스턴스가 생성됐을 때, 원하는 로직을 추가해서 구현할 수 있는 부분이다.
1 2 3 4 5 6 7 8 | var vm = new Vue({ data: { a: 1 }, created: function () { console.log('a is: ' + this.a) } }) | cs |
이 외에도 Lifecycle 단계에 따라 아래 메서드를 사용할 수 있다.
mounted
updated
destroyed
위와 같이 초기화 메서드로 커스텀 로직을 수행하기 때문에 Vue에서는 따로 Controller를 갖고 있지 않다.
Vue instance lifecycle hook custom logic
실습
주의할 점은 updated 속성은 mounted 단계에서 데이터가 변경 되어야만 동작한다는 것이다. created 단계에서 데이터가 변경되면 updated는 동작하지 않게 된다.
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 31 32 33 34 | <html> <head> <title>Vue Sample</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://unpkg.com/vue@2.3.3"></script> <script> var vm = new Vue({ el: '#app', data: { message: 'Hello Vue.js!!' }, beforeCreate: function() { console.log("beforeCreate"); }, created: function() { console.log("created"); }, mounted: function() { console.log("mounted"); this.message = '123'; }, updated: function() { console.log("updated"); } }) </script> </body> </html> | cs |
'ICT Eng > Vue.js' 카테고리의 다른 글
[Vue.js] 06. Vue Router(뷰 라우터) (0) | 2018.09.28 |
---|---|
[Vue.js] 05. Vue 컴포넌트간 통신 (2) | 2018.09.27 |
[Vue.js] 04. Vue Component (0) | 2018.09.01 |
[Vue.js] 02. Vue.js 시작하기(MVVM 패턴) (0) | 2018.09.01 |
[Vue.js] 01. Vue를 위한 개발환경 설정 (0) | 2018.09.01 |
- Total
- Today
- Yesterday
- 인프런
- Vue.js
- RBT
- 한밭이글스
- 젠킨스
- Java
- 레드블랙트리
- IT융합인력양성사업단
- JPA
- 스프링부트
- Spring
- github
- Recursion
- 한밭대학교
- 자바
- 순환
- 알고리즘
- 정렬
- vuejs
- Raspberry Pi
- Algorithm
- 무선통신소프트웨어연구실
- Spring Boot
- ORM
- springboot
- Wisoft
- 라즈베리파이
- 시간복잡도
- vuex
- AWS
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |