Vue.js - 인스턴스(Instance) 기본 설명
① Vue.js 인스턴스(Instance)
- 데이터 변경(watch) 관찰을 설정한다.
- 템플릿(template)을 컴파일한다.
- DOM을 마운트(Mount), 업데이트(Update) 한다.
② 인스턴스(Instance)를 초기화 할 때는 아래와 같은 옵션(options) 객체를 전달해야 한다.
- 데이터(data)
- 템플릿(template)
- 마운트 엘리먼트(Mount Element)
- 메소드(method)
- 라이프사이클(LifeCycle) 관련 콜백(callback) 등
③ 미리 정의된 옵션은 API reference 에서 확인하자.
Vue.js 기초문법7 - 인스턴스 생성, watch(감시자) 예제
기본 설명 및 소스코드
- 하단 예제에서는 데이터(data), 엘리먼트(element), 라이프라이클(created) 객체를 옵션으로 전달했다.- watch 메소드의 값 변화를 주목하자.
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 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>webpos-do</title> </head> <body> <div id="app"> <h1>Vue.js - 인스턴스 생성 & Watch</h1> <h5>Count : {{test}}</h5> <button v-on:click="test += 1">Add 1</button> </div> <script src="https://unpkg.com/vue"></script> <script> var data = { test: 0 }; var vm = new Vue({ el: '#app', data: data, created: function () { //초기 데이터 확인 console.log('test is: ' + this.test) } }) //같은 객체 참조 - 당연히 속성 변경은 원본 데이터에 영향 끼친다. console.log(vm.test === data.test) console.log(vm.$data === data) vm.$watch('test', function (newVal, oldVal) { console.log('이전 데이터', oldVal) console.log('변경 데이터', newVal) }) </script> </body> </html> | cs |
vue_basic4_example.zip참고 : https://www.vuejs.org/v2/guide/index.html
'웹 프론트 > Vue' 카테고리의 다른 글
| Vue.js - 기초 문법 배우기(6) 강의 및 예제 소스 - 기초 문법 (2) | 2017.12.01 |
|---|---|
| Vue.js - 기초 문법 배우기(5) 강의 및 예제 소스 - 라이프사이클(LifeCycle) (1) | 2017.11.29 |
| Vue.js - 기초 문법 배우기(3) 강의 및 예제 소스 (4) | 2017.11.26 |
| Vue.js - 기초 문법 배우기(2) 강의 및 예제 소스 (2) | 2017.10.01 |
| Vue.js - 기초 문법 배우기(1) 강의 및 예제 소스 (0) | 2017.09.30 |
Vue.js - 인스턴스(Instance) 기본 설명
① Vue.js 인스턴스(Instance)
- 데이터 변경(watch) 관찰을 설정한다.
- 템플릿(template)을 컴파일한다.
- DOM을 마운트(Mount), 업데이트(Update) 한다.
② 인스턴스(Instance)를 초기화 할 때는 아래와 같은 옵션(options) 객체를 전달해야 한다.
- 데이터(data)
- 템플릿(template)
- 마운트 엘리먼트(Mount Element)
- 메소드(method)
- 라이프사이클(LifeCycle) 관련 콜백(callback) 등
③ 미리 정의된 옵션은 API reference 에서 확인하자.
Vue.js 기초문법7 - 인스턴스 생성, watch(감시자) 예제
기본 설명 및 소스코드
- 하단 예제에서는 데이터(data), 엘리먼트(element), 라이프라이클(created) 객체를 옵션으로 전달했다.- watch 메소드의 값 변화를 주목하자.
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 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>webpos-do</title> </head> <body> <div id="app"> <h1>Vue.js - 인스턴스 생성 & Watch</h1> <h5>Count : {{test}}</h5> <button v-on:click="test += 1">Add 1</button> </div> <script src="https://unpkg.com/vue"></script> <script> var data = { test: 0 }; var vm = new Vue({ el: '#app', data: data, created: function () { //초기 데이터 확인 console.log('test is: ' + this.test) } }) //같은 객체 참조 - 당연히 속성 변경은 원본 데이터에 영향 끼친다. console.log(vm.test === data.test) console.log(vm.$data === data) vm.$watch('test', function (newVal, oldVal) { console.log('이전 데이터', oldVal) console.log('변경 데이터', newVal) }) </script> </body> </html> | cs |
vue_basic4_example.zip참고 : https://www.vuejs.org/v2/guide/index.html
'웹 프론트 > Vue' 카테고리의 다른 글
| Vue.js - 기초 문법 배우기(6) 강의 및 예제 소스 - 기초 문법 (2) | 2017.12.01 |
|---|---|
| Vue.js - 기초 문법 배우기(5) 강의 및 예제 소스 - 라이프사이클(LifeCycle) (1) | 2017.11.29 |
| Vue.js - 기초 문법 배우기(3) 강의 및 예제 소스 (4) | 2017.11.26 |
| Vue.js - 기초 문법 배우기(2) 강의 및 예제 소스 (2) | 2017.10.01 |
| Vue.js - 기초 문법 배우기(1) 강의 및 예제 소스 (0) | 2017.09.30 |
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}