728x90
반응형
MVVM 모델에서의 Vue
Vue는 무엇인가?
MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리
View - 브라우저에서 사용자에 비추어지는 화면(html)
DOM Listeners - View의 이벤트 요소들을 청취하여 자바스크립트를 Model에서 실행
Data Bindings - Model의 변동된 사항을 View에 전달
vscode에서 ! + tab - html 기본적인 폼
div#app - <div id="app"></div> 생성
기존의 웹 개발 방식 (HTML, Javascript)
<!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>
<!-- DOM의 정보 -->
<div id="app"></div>
<!-- 해당 태그나 DOM의 내용을 조작 -->
<script>
// Jquery 선택자 $('#app');와 같은 역활
var div = document.querySelector('#app');
// div tag의 정보를 가져와 변수 div에 저장
// console.log(div); div 정보를 출력
// div.innerHTML = 'hello world'; div에 문자열 추가
var str = 'hello world';
div.innerHTML = str;
str = 'hello world!!!';
div.innerHTML = str; //바뀐 문자열을 갱신 해주어야한다.
</script>
</body>
</html>
Reactivity 구현 (Vue의 핵심)
data의 변화를 라이브러리에서 감지하여서 알아서 화면을 자동으로 그려주는 것
<!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');
div.innerHTML = 'hello world';
이러한 방식을 아래처럼 변경
*/
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>
Reactivity 코드 라이브러리화 하기
<!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 = {};
//즉시 실행 함수
(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>
Hello Vue.js와 뷰 개발자 도구
<!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>
728x90
반응형
'Vue.js' 카테고리의 다른 글
| Level 1. 개발 환경 설정 (0) | 2020.12.28 |
|---|---|
| Level 1. 인스턴스 (0) | 2020.12.28 |
| Level 1. 컴포넌트 통신 방법 - 기본 (0) | 2020.12.28 |
| Level 1. 컴포넌트 통신 방법 - 응용 (0) | 2020.12.28 |
| Level 1. 컴포넌트 (0) | 2020.12.28 |
