728x90
출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js
1. Reactivity
: 변수의 값이 변하면 연동된 변수들의 값이 실시간으로 모두 변한다.
(1) java script로 Reactivity 구현
: viewModel 에 접근할때마다 get, set 메소드의 실행을 통해 연관된 값들을 같이 변경시켜 준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
var div = document.querySelector('#app');
var viewModel = {};
// Object.defineProperty('대상 객체', 객체의 속성, {
// //..문법 정의할 내용
// })
(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>
</body>
</html>
(2) Vue.js - 완전히 같지는 않지만 간결하다. 그냥 이렇게 생겼구나 정도로 확인
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=div, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data:{
message:'hi'
},
});
</script>
</body>
</html>
728x90
'Front-End > Vue' 카테고리의 다른 글
| [장기효(캡틴판교) - Vue.js 시작하기] 5. router (0) | 2021.01.24 |
|---|---|
| [장기효(캡틴판교) - Vue.js 시작하기] 4. props/ event (0) | 2021.01.23 |
| [장기효(캡틴판교) - Vue.js 시작하기] 3. 컴포넌트 (0) | 2021.01.23 |
| [장기효(캡틴판교) - Vue.js 시작하기] 2. 인스턴스 (0) | 2021.01.23 |
| [장기효(캡틴판교) - Vue.js 시작하기] 0. 개발 환경설정 (0) | 2021.01.23 |
댓글