728x90
Vue.js는 사용자 인터페이스를 만들기 위한 동적 JavaScript 프레임워크이다.
- 데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API 를 지원하는데에 궁극적인 목적이 있음
- Angular에서 지원하는 양방향 데이터 바인딩 을 동일하게 제공
- 하지만 컴포넌트 간 통신의 기본 골격은 React의 단방향 데이터 흐름(부모 -> 자식)을 사용
- 다른 프런트엔드 프레임워크(Angular, React)와 비교했을 때 상대적으로 가볍고 빠름.
- 문법이 단순하고 간결하여 초기 학습 비용이 낮고 누구나 쉽게 접근 가능
1. Vue.js 특징
MVVM 패턴 사용
Model-View-ViewModel의 약자이다. 프로그래밍 로직과 화면에 해당하는 View(UI)를 분리해서 개발하기 위해 설계된 패턴이다.
컴포넌트를 사용한 높은 재사용성
View를 재사용할 수 있는 구조로 개발하는 것을 컴포넌트(Component)라고 부른다.
Vue로 개발된 파일(.vue) 하나하나가 모두 컴포넌트이다. 컴포넌트는 한 화면을 이루는 작은 요소일 수도 있고, 한 화면 전체일 수도 있다. Vue에서 하나의 컴포넌트는 HTML+CSS+Javascript로 이루어져 있고, 다른 컴포넌트에서 import해서 사용할 수 있다.
2. vue.js 시작하기
Vue.js 는 따로 설치할 필요 없이 간단하게만 실행해보려면 html에 스크립트 코드만 한 줄 추가하면 된다.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<br />
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!",
}
});
</script>
</body>
</html>
3. 라우팅이란?
라우팅이란 클라이언트에서 url 주소에 따라 페이지가 전환되는 것이다.
특정 웹 페이지에 접속했을 때, 메뉴 혹은 특정 링크를 클릭하면 화면이 전환된다. 이때 브라우저의 주소란을 보면 페이지가 이동될 때마다 url주소가 변경되는 것을 확인할 수 있다.
vue와 같은 단일 페이지 애플리케이션의 경우 페이지를 이동할 때마다 서버에 요청해서 페이지를 새로 갱신하는 것이 아니라 클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해서 화면을 갱신하게 된다.
728x90
'🎨 Web_Front end > Vue.js' 카테고리의 다른 글
| [Vue.js] 컴포넌트 (0) | 2023.05.30 |
|---|
