Vue.js
-
프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크
-
MVVM(model-view-viewmodel) 패텅의 ViewModel에 해당하여, UI코드와 데이터제어 로직을 분리
view <------ viewmodel ------> model object DTO -
SPA(Single Page Application)을 구축하는데 이용 가능 //Ajax같은! servlet처럼 왔다갔다안하고!
✔ Vue.js 장점
- 배우기 쉬움
- React, Angular에 비해 가볍고 성능이 빠름 대신 기능이 좀 적다.
- React(Virtual DOM), Angular(데이터 바인딩)의 장점을 가지고 있음
- 컴포넌트 기반 프레임워크로 레고 블럭과 같이 컴포넌트 조합으로 뷰를 구성하고 코드를 재활용
✔ Virtual DOM
- 화면에 변화가 있을 때 실시간으로 DOM Tree를 수정하지 않고 변경사항이 반영된 Virtual DOM을 이용해 메모리에서 처리하고 한번만 DOM 수정을 함
- 결과적으로 브라우저는 한번만 렌더링 하게 됨으로 불필요한 렌더링 횟수를 줄일 수 있읍
✔ Vue.js CDN으로 사용법
<script src="https://unpkg.com/vue@3"></script> 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>Vue</title>
<script src="https://unpkg.com/vue@3"></script> <!-- 뷰 라이브러리 추가 -->
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
const { createApp } =Vue //1. 뷰 객체를 만든다.
createApp({
//2. 제어 연산 부분 (지금은 없음)
data() { //3.제어에 따라 데이터 바뀌는 부분
return {
message: '안녕 Vue!'
}
}
}).mount('#app') //4. 선택자 연결
</script>
</body>
</html>출처
Vue 공식 사이트 https://v3-docs.vuejs-korea.org/
