MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리
<div id="app"></div>
<script>
const div = document.querySelector('#app');
let str = 'Hello World!'
div.innerHTML = str
str = 'hello world!!!'
div.innerHTML = str // 다시 호출 해야 변경됨
</script>
<div id="app"></div>
<script>
const div = document.querySelector('#app')
const viewModel = {};
// Object.defineProperty : 객체의 동작을 재정의하는 api
// Object.defineProperty(대상 객체, 객체의 속성, {
// // 정의할 내용
// });
Object.defineProperty(viewModel, 'str', {
// 속성에 접근했을 때의 동작을 정의
get: function(){
console.log('접근');
},
// 속성에 값을 할당했을 때의 동작을 정의
set: function(newValue){
console.log('할당', newValue);
div.innerHTML = 'newValue';
}
});
</script>
<div id="app"></div>
<script>
const div = document.querySelector('#app')
const viewModel = {};
// IIFE (즉시실행함수)
(function(){
function init(){
Object.defineProperty(viewModel, 'str', {
// 속성에 접근했을 때의 동작을 정의
get: function(){
console.log('접근');
},
// 속성에 값을 할당했을 때의 동작을 정의
set: function(newValue){
console.log('할당', newValue);
render(newValue)
}
});
}
function render(value) {
div.innerHTML = value;
}
init();
})();
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Getting Started</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js'
}
})
</script>
</body>
</html>