Vue 시작하기
뷰는 사용자 인터페이스(UI, User Interface)를 만드는 데 사용하는 자바스크립트 기반 오픈소스
프로그레시브 프레임워크입니다.
프로그레시브 프레임워크란 이미 다른 사양으로 개발된 웹 애플리케이션에서 일부분만 ‘점진적으로(progressive)’ 적용할 수 있도록 모듈화하고 유연한 구조를 갖춘 프레임워크를 의미합니다
Vue는 주로 웹페이지를 쉽고 빠르게 제작하기 위해 사용합니다.
MVVM
뷰는 MVVM 아키텍처 패턴을 따릅니다.
MVVM 아키텍처 패턴은 데이터를 보여주는 뷰(view) 영역과 데이터를 처리하는 모델(model) 사
이에 데이터를 중개하는 뷰 모델(view model) 계층을 두어 UI와 데이터 처리 로직의 상호 의존
성을 줄이는 아키텍처 패턴을 말합니다.
양방향바인딩
뷰는 데이터의 바인딩이 양방향 바인딩입니다.
예를 들어서 리액트에서는 상태를 정의하고, 상태를 이벤트와 연결해서 직접 값을 바꿔야 하는 단방향 바인딩입니다.
뷰는 양방향 바인딩이기 때문에 생성한 데이터를 연결해주기만 하면 끝입니다.
<div id="app">
<input v-model="message" placeholder="Type something">
<p>The message is: {{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
});
</script> 필수 익스텐션
일반적으로 vue 확장자 파일은 비주얼 스튜디오 코드가 인식하지 못합니다. 그래서 아래와 같은 익스텐션을 필수로 설치해야 합니다.
Vue 애플리케이션 만들기
CDN으로 설치하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<h1>{{count}}</h1>
<button @click="increment">증가</button>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: "Hello, World",
count: 0,
};
},
methods: {
increment() {
this.count += 1;
},
},
}).mount("#app");
</script>
</body>
</html>
vite로 설치하기
npm create vite@latest .
Vue로 설치하기 (공식 홈페이지 권장)
npm create vue@latest .
✔ Package name: … vues
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? › No
