0816 Vue.js의 reactivity

 1. 기존의 HTML, CSS, Javascript방식 :

데이터가 바뀌면 그때마다 코드를 추가해서 할당을 해주어야 한다. 코드가 늘어나고 번거롭다!!

2. Vue.js방식:

View 에서 이벤트가 일어나면 그에 반응하여 페이지를 그려주고

데이터 (JS)쪽에서 이벤트가 일어나면 그에 반응하여 페이지를 그려준다!! 양쪽에서 중개해줌

3. Vue.js를 이용해서 오브젝트의 속성을 정의하고, 동적으로 페이지를 그릴수있다

4. viewModel이라는 오브젝트를 정의한다

var viewModel = {};

Object.defineProperty를 이용하여 해당 오브젝트의 속성을 정의한다.

Object.defineProperty(viewModel, 'str' {함수});

와 같은 형식을 띄고 있다.

해당 함수안에 get , set을 이용하여 할당되는 값을 만든다

이때 set함수안에 div태그에 해당 값을 그려주도록 설정하면 - !! 동적으로 값이 바인딩된다!! 우와!! 프런트엔드 신기하다....