728x90
반응형
Vue
MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리
Reactivity
데이터의 변화를 라이브러리에서 감지해서 알아서 화면을 자동으로 그려주는 것
Object.defineProperty()
객체에 직접 새로운 속성을 정의하거나 이미 존재하는 속성을 수정한 후, 그 객체를 반환
// vue-way.html
<!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 = {};
// 객체의 동작을 재정의하는 API
// Object.defineProperty('대상 객체', '객체의 속성', {
// // 정의할 내용
// });
Object.defineProperty(viewModel, 'str', {
// 속성에 접근했을 때의 동작을 정의
get: function() {
console.log('접근');
},
// 속성에 값을 할당했을 때의 동작을 정의
set: function(newValue) {
console.log('할당', newValue);
div.innerHTML = newValue;
}
});
</script>
</body>
</html>Object.defineProperty 라이브러리화 하기
특정 기능을 나눠 함수로 구현
// vue-way.html
<!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 = {};
// 즉시 실행 함수
// 기본적으로 init, render가 Application 로직에 노출되지 않게 또다른 유효범위에 넣어주는 것
// 유효범위 관리를 위함
(function() {
// 초기화
function init() {
Object.defineProperty(viewModel, 'str', {
// 속성에 접근했을 때의 동작을 정의
get: function() {
console.log('접근');
},
// 속성에 값을 할당했을 때의 동작을 정의
set: function(newValue) {
console.log('할당', newValue);
render(newValue);
}
});
}
// div 값 변경 함수
function render(value) {
div.innerHTML = value;
}
init();
})();
</script>
</body>
</html>즉시 실행 함수 참고
developer.mozilla.org/ko/docs/Glossary/IIFE
IIFE
즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript Function 를 말한다.
developer.mozilla.org
728x90
반응형
'Dev > Vue.js' 카테고리의 다른 글
| [Vue.js] 컴포넌트 통신 방법 - 응용 (0) | 2020.09.08 |
|---|---|
| [Vue.js] 컴포넌트 통신 방식 - 기본 (0) | 2020.09.07 |
| [Vue.js] 컴포넌트 (0) | 2020.09.07 |
| [Vue.js] 인스턴스 (0) | 2020.09.07 |
| [Vue.js] 강좌 소개 및 환경 설정 (0) | 2020.09.07 |
댓글