캡틴 판교님의 인프런 Vue.js 시작하기 - Age of Vue.js를 듣고 공부하며 정리하는 내용입니다.
Vue.js
MVVM패턴의 뷰 모델 레이어에 해당하는 View(화면)단 라이브러리
DOM : 문서 객체 모델. 사용자와 상호작용하기 어려운 HTML코드가 실제적으로 상호작용 할 수 있도록 도와준다
DOM리스너 : js에 있는 이벤트를 잡아준다.
Data binding: 데이터가 변했을 때 변경사항을 화면에 반영한다.
Reactivity (반응성)
Reactivity (반응성) 이란 데이터가 변경되었을 때 감지하고, 반응하는 것으로 Vue프레임워크의 핵심이다.
데이터의 변화를 라이브러리에서 감지해 알아서 화면에 그려준다.
<body>
<div id="app">
</div>
<script>
const div= document.querySelector('#app');
//console.log(div);
let str = 'hello world';
div.innerHTML= str;
str = 'hello world!!!';
div.innerHTML=str;
</script>
</body>
일반적인 js 소스
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data: {
message:'hi'
}
});
</script>
</body>
</html>뷰를 사용한 소스
일반적인 자바스크립트 소스는 데이터가 변경되면 데이터 바인딩을 다시 해주어야 했지만,
뷰는 그럴 필요 없이 문서가 즉각적으로 변경된다.
'JavaScript > Vue.js' 카테고리의 다른 글
| [Vue.js] 컴포넌트 (component) (0) | 2022.11.22 |
|---|---|
| [Vue.js] 인스턴스(instance) (0) | 2022.11.22 |