MVVM 패턴
Model + View + ViewModel 패턴을 의미
- Model은 자바스크립트 객체
- View는 웹페이지의 DOM
- VIewModel은 Vue의 역할
기존 자바스크립트로 view에 해당하는 Dom에 접근하거나 수정하기 위해 jQuery와 같은 라이브러리를 이용한다
Vue는 View와 Model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 한다
Reactivity
Vue의 핵심으로 데이터의 변화를 라이브러리에서 감지해서 알아서 화면을 변화시키는 것
<!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>
www.inflearn.com/course/Age-of-Vuejs/
Vue.js 시작하기 - Age of Vue.js - 인프런
Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요. 초급 웹 개발 프레임워
www.inflearn.com
joshua1988.github.io/vue-camp/
Cracking Vue.js
joshua1988.github.io
위 강좌를 통해 배운 내용을 정리한 것입니다.
'Study > Vue' 카테고리의 다른 글
| [Vue] HTTP 통신 라이브러리 - Axios 엑시오스 (0) | 2020.12.06 |
|---|---|
| [Vue] 뷰 라우터(router) (0) | 2020.12.06 |
| [Vue] 같은 컴포넌트 레벨 간의 통신 방법 (0) | 2020.12.06 |
| [Vue] 컴포넌트 통신 방식 Props, Event emit (0) | 2020.12.05 |
| [Vue] 컴포넌트 Component (0) | 2020.12.02 |
댓글