MVVM 패턴의 뷰모델 레이어에 해당하는 화면단 라이브러리.
화면단은 DOM을 통해서 JavaScript와 통신하는 HTML로 그려진다. 뷰의 가장 큰 특징은
1. 사용자가 화면에서 어떤 입력을 하는지 DOM Listener가 듣고있다가 자바스크립트에 전달해주고
2. 자바스크립트(데이터)쪽에서 데이터가 변경되면 데이터 바인딩이 되어있어 화면에서도 바로 변함
( 내가 듣는 인강에서는 저 Directives 단어 대신에 Data Binding)이라고 되어있었다.
기존의 웹 개발 방식은 아래와 같다.
<body>
<div id="app">
</div>
<script>
var div= document.querySelector("#app");
div.innerHTML = 'hello world'; // 화면에 출력되는 값 : hello world
str = "hihi"; //화면에 출력되는 값 : hello world
div.innerHTML = str; // 화면에 출력되는 값 : hihi >> js to HTML로 다시셋팅을 해줘야 반영이 된다.
</script>
</body>
뷰의 장점인 Reactivity를 활용한다면 이렇게 값이 바뀔 때 마다 js to HTML 셋팅을 다시 해주지 않아도 되는 것이다.
<body>
<div id="app"></div>
<script>
var div = document.querySelector("#app");
div.innerHTML = 'hello world';
var viewModel = {};
//객체의 동작을 재정의하는 api
//Object.defineProperty('대상객체, 객체의 속성, {
//정의할 내용
//}')
//누가 viewModel.str을 조회하거나, 값을 할당했을 때 실행되는 함수 정의
Object.defineProperty(viewModel, 'str',{
get: function () {
console.log('조회');
},
set : function (newVal) { // 누가 viewModel.str의 값을 변화시켰을 때 js to HTML 을 매번 호출하게 라이브러리화 함.
console.log('할당', newVal);
div.innerHTML = newVal;
}
})
</script>
</body>
이런식으로 간단하게 리액티비티를 라이브러리화 할 수 있다.
(function(){ // 자바스크립트의 즉시실행 함수
function init () {
//누가 viewModel.str을 조회하거나, 값을 할당했을 때 실행되는 함수 정의
Object.defineProperty(viewModel, 'str',{
get: function () {
console.log('조회');
},
set : function (newVal) { // 누가 viewModel.str의 값을 변화시켰을 때 js to HTML 을 매번 호출하게 라이브러리화 함.
console.log('할당', newVal);
render(newVal);
}
})
}
function render(newVal) {
div.innerHTML = newVal;
}
init();
}) ();
해당 포스팅은 인프런의 Vue.js 시작하기 - Age of Vue.js 학습 후 정리한 내용임을 알려드립니다.
'Study > Vue' 카테고리의 다른 글
| Vue.js 시작하기 06. 뷰 라우터 (0) | 2022.01.20 |
|---|---|
| Vue.js 시작하기 05. 컴포넌트 레벨 간의 통신 방법 (0) | 2022.01.19 |
| Vue.js 시작하기 04. 컴포넌트 통신방식 (0) | 2022.01.19 |
| Vue.js 시작하기 03. 컴포넌트 (0) | 2022.01.18 |
| Vue.js 시작하기 02. 인스턴스 (0) | 2022.01.17 |