프레임워크/Vue.js
Vue.js
book_lover
2024. 6. 22. 14:04
Vue.js는 학습곡선이 완만하고 처음 프런트엔드 프레임워크 접하기에 좋은 선택지이다.
MVVM 패턴을 따르고 있다. 엑셀의 스프레드시트와 차트의 관계로 비유할 수 있다. 엑셀 시트상 데이터를 변경하면 차트가 다시 그려지듯이 Model의 데이터가 변경되면 View의 화면이 다시 그려진다.
View Model은 Model의 데이터 변경 사실에 대한 알림을 받고 바인딩 기법을 통해 미리 정해진 템플릿의 규칙에 따라 View를 다시 그려낸다.
[디자인 패턴] MVVM 패턴이란?
개념 :MVVM (Model-View-ViewModel) 패턴은 Model View, View, Model의 약자로 프로그램의 비지니스 로직과, 프레젠테이션 로직을 UI로 명확하게 분리하는 패턴입니다.데이터를 다루는 부분. 비즈니스 로직을
velog.io
- Node.js : 서버 측 자바스크립트 언어이자 플랫폼
- npm : 앱의 의존성 관리를 위해 사용하는 노드 패키지 관리자
- Visual Studio Code : 코드 편지 도구
- Vue.js devtools : 크롬 브라우저 기반에서 작동하는 Vue.js 전용 디버깅, 개발 도구
- https://github.com/stepanowon/vue3-quickstart
GitHub - stepanowon/vue3-quickstart
Contribute to stepanowon/vue3-quickstart development by creating an account on GitHub.
github.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>01-01</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var model = { message: "Hello Vue3!" };
var vm = Vue.createApp({
name: "App",
data() {
return model;
},
}).mount("#app");
</script>
</body>
</html>
