Vue.js는 무엇인가?
Vue.js 공식 설명
사용자 인터페이스를 만들기 위한 프로그레시브 자바스크립트 프레임워크.
다른 단일형 프레임워크와 달리 점진적으로 채택할 수 있도록 설계.
MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리
기존의 웹개발 방식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
var div = document.querySelector('#app');
var str = 'hello world';
div.innerHTML = str;
str = 'hello world!!!'; // ① 변수값이 변경됨.
div.innerHTML = str; // ② 다시 div에 접근하여 변경된 값을 적용해주어야 함.
</script>
</body>
</html>기존의 HTML과 순수 JavaScript만을 사용하던 방식으로는 위의 예시에서처럼 변수값이 변경되었을 때 변경된 값을 적용해주기 위해 다시 적용할 부분에 접근해야 했다.
Vue의 방식
(Vue를 사용했다는 것이 아니라 Vue가 화면에 접근하고, 데이터를 변경하는 '방식'이 이런 식이라는 것을 보여주기 위함)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>결과 :
이렇게 데이터의 변화에 따라 화면에 반영되는 것을 Reactivity라 한다.
Vue에서도 이 Reactivity가 적용된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>결과 :
