캡틴 판교님의 [Vue.js 시작하기] 강의를 듣고 정리한 내용입니다.
Vue는 무엇인가?
MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리
Vue의 2가지 특징
- DOM Listeners
- View 라고 하는 것은 browser에서 사용자에게 비추어 지는 화면을 의미한다.
- 화면에 나타나는 요소들을 html이라고 하며, 그 html은 DOM이라는 것들을 이용해서 JS로 조작할 수 있게끔 구성이 된다.Vue에서는 그런 이벤트를 잡아서 JS에 있는 Data를 바꾸어 주거나, JS의 지정된 특정 로직에서 실행을 하게 되는데, 이것을 DOM Listener라고 한다.
- View에서 특정 사용자가 키보드 또는 마우스 등을 조작을 통해 이벤트를 중간의 DOM Listeners로 vue에서 청취하게된다.
- Data Bindings
- Data BindingsJS의 데이터가 만약, 어떤 문자열 또는 숫자 등이 바뀌었을 때, data bindings를 통해 화면에 반영하게 된다.
- DOM Listener에 의해 전달된 이벤트를 통해 JS의 데이터가 변했을 때, 2번째 특징인 Data bindings를 타게 된다.
1. Reactivity
: 변수의 값이 변하면 연동된 변수들의 값이 실시간으로 모두 변한다.
(1) javaScript로 Reactivity 구현
: viewModel 에 접근할때마다 get, set 메소드의 실행을 통해 연관된 값들을 같이 변경시켜 준다.
즉시실행함수(IIFE)를 사용한 이유는, 실제 실행되는 코드를 또 다른 스코프에 넣어줌으로써, 유효 범위를 관리하고자 할때 사용
<!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 - Vue의 데이터 속성이 반영되어 있기 때문에, data 속성의 객체에서 message를 변경할 경우 화면에도 즉각적으로 반영된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">{{message}}</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({ // Vue 인스턴스 생성
el: "#app", // DOM 요소 선택
data: { // Vue 에서 관리하는 data 속성
message: "Hello Vue.js",
},
});
</script>
</body>
</html>
반응형
'IT > Vue' 카테고리의 다른 글
| [Vue.js 시작하기] 03. 컴포넌트 (0) | 2022.04.24 |
|---|---|
| [Vue.js 시작하기] 02. 인스턴스 (0) | 2022.04.24 |
댓글