1. Vue.js란?
쉽게 생각하면 Frontend의 프레임워크라고 할 수 있으며, 가볍다는 것이 장점이다.
2. MVVM Pattern (Model + View + ViewModel)
- Model : 순수 JS 객체, Logic처리
- View : 웹페이지 DOM (= html)
- ViewModel : Vue
Vue가 view와 model을 자동으로 바인딩해서, 양방향 통신을 가능하게 한다.
풀어서 설명하자면, Vue가 DOMListener를 통해 DOM을 보고 있다가 변경사항이 생기면 JS에 반영한다.
반대로 DataBinding을 통해 JS에서 Data가 변경되면 DOM에 반영한다.
3. Vue 시작하기
1. Chrome 웹스토어에서 개발자 도구 추가
웹스토어에서 vue검색(아래 사이트) > Vue.js devtools 추가하기
https://chrome.google.com/webstore/detail/vuejs-devtools/
2. Vue.js 설치
다운로드하는 방법은 CDN, NPM, CLI로 3가지가 있다. 그중에서 초보자가 접근하기 쉬운 CDN방식을 사용했다.
https://kr.vuejs.org/v2/guide/
시작하기 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
사이트에서 개발버전인 태그를 복사해서 html에 붙여 넣는다.
<!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>지시자 연습</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h3 id="app">{{message}}</h3>
<script>
new Vue({
el: "#app",
data() {
return {
message: "hello Vue JS"
}
},
})
</script>
</body>
</html>
alt 누른 상태로 l, o를 차례로 누르면 live server가 실행된다.
화면에서 F12를 눌러 개발자 도구를 보면, Vue가 생긴 것을 확인할 수 있다.
'Programming > Vue' 카테고리의 다른 글
| [Vue] (기타) 지시자 응용 (0) | 2022.05.11 |
|---|---|
| [Vue] 05. Vue Event 처리 (0) | 2022.05.11 |
| [Vue] 04. Vue Instance 속성 사용법 (0) | 2022.05.11 |
| [Vue] 03. 보간법과 지시어 (0) | 2022.05.04 |
| [Vue] 02. Vue Instance (0) | 2022.05.04 |