# MVVM 모델에서의 vue
MVVM 패턴의 뷰모델(VM) 레이어에 해당하는 화면(V)단 라이브러리
- View
DOM
- ViewModel
DOM Listener
DATA Binding
- Model
Plain JS Object
# 기존 웹 개발 방식(HTML, JS)
Tip. VS Code (Auto Close Tag 플러그인 설치시?)
- !누르고 엔터 누르면 자동으로 HTML 베이스 작성해줌
- div#app 치고 엔터를 누르면 자동으로 id가 app인 div 태그 생성 해줌
<!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>
// console.log(div);
var div = document.querySelector('#app');
var str = 'hello world';
div.innerHTML = str;
str = 'hello, world!!';
div.innerHTML = str;
</script>
</body>
</html>
=> str이란 데이터 변수와 div라는 View가 별도로 동작하므로, 일일히 변경값을 넣어주어야 함
# Reactivity 구현
<body>
<div id="app">
</div>
<script>
var div = document.querySelector('#app');
var viewModel = {};
// Object.defineProperty(대상 객체, 객체의 속성, {
//정의할 내용
// });
// 객체 재정의하는 메소드
// 할당과 접근 기존 방식을
Object.defineProperty(viewModel, 'str', {
get: function() {
console.log('접근');
},
set: function(newValue){
console.log('할당', newValue);
div.innerHTML = newValue;
//Data Binding 개념
}
})
</script>
</body>
# Reactivity 코드 라이브러리화 하기
(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(); // 초기화
})();
# Hello Vue.js와 뷰 개발자도구
Component
<Root>
- data 확인 가능
'[DEV] App Dev ∕ Web Front > Framework ∕ Vue' 카테고리의 다른 글
| [vue.js] 뷰 라우터 (0) | 2020.12.02 |
|---|---|
| [vue.js] 컴포넌트 응용(같은 컴포넌트간 전달) (0) | 2020.12.02 |
| [vue.js] 컴포넌트 통신 (0) | 2020.12.02 |
| [vue.js] 컴포넌트 (0) | 2020.12.02 |
| [vue.js] 인스턴스 (0) | 2020.12.02 |
최근댓글