Vue.js
- 사용자 인터페이스를 만들기 위한 동적 JavaScript 프레임워크
- 컨트롤러 대신 뷰 모델을 가지는 MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인 됨
MVVM Pattern
- Model : 순수 자바스크립트 객체
- View : 웹페이지의 DOM
- ViewModel : Vue의 역할
* 기존에는 자바스크립트로 view에 해당하는 DOM에 접근하거나 수정하기 위해 jQuery와 같은 library 이용
* Vue는 view와 Model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 함
Vue Instance
| el |
|
| data |
|
| template |
|
| methods |
|
| created |
|
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "안녕하세요 Vue!",
},
});
</script>
</body>
</html>
Vue Instance Life Cycle
Vue의 Life Cycle은 크게 나누면 다음과 같이 4단계로 나뉨
- Instance의 생성 (created)
- 생성된 Instance를 화면에 부착 (mounted)
- 화면에 부착된 Instance의 내용이 갱신 (updated)
- Instance가 제거되는 소멸 (destroyed)
| life cycle 속성 | 설명 |
| beforeCreate | Vue Instance가 생성되고 각 정보의 설정 전에 호출 *DOM과 같은 화면요소에 접근 불가 |
| created | - Vue Instance가 생성된 후 데이터들의 설정이 완료된 후 호출 - Instance가 화면에 부착되기 전이기 때문에 template 속성에 정의된 DOM요소는 접근 불가 - 서버에 데이터 요청(http 통신)을 하여 받아오는 로직을 수행하기 좋음 |
| beforeMount | 마운트가 시작되기 전에 호출 |
| mounted | - 지정된 element에 Vue Instance 데이터가 마운트 된 후에 호출 - template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직 수행 |
| beforeUpdate | 데이터가 변경될 때 virtual DOM이 랜더링, 패치 되기 전에 호출 |
| updated | - Vue에서 관리되는 데이터가 변경되어 DOM이 업데이트 된 상태 - 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가 |
| beforeDestroy | Vue Instance가 제거되기 전에 호출 |
| destroyed | Vue Instance가 제거된 후에 호출 |
Virtual DOM, 가상 돔
: 실제 DOM에서 처리하는 방식이 아닌 Virtual DOM과 메모리에서 미리 처리하고 저장한 후, 실제 DOM과 동기화하는 프로그래밍 개념
* 실제로 스크린에 랜더링하는 것이 아니기 때문에 DOM을 직접 업데이트하는 것보다 상대적으로 빠름
DOM Virtual DOM 업데이트 느림 빠름 HTML
업데이트 방식HTML을 직접적으로 업데이트 HTML을 직접적으로 업데이트 하지 않음 새로운 element
업데이트 방식새로운 DOM 생성 가상 DOM 생성 후 이전 DOM과
차이나는 DOM만 업데이트메모리 메모리 낭비가 심함 메모리 낭비가 덜함
Directive
- v- 접두사가 있는 특수 속성
- 디렉티브 속성 값은 단일 JavaScript 표현식 (v-for 는 예외)
- 디렉티브의 역할은 표현식의 값이 변경될 때 사이드 어펙트를 반응적으로 DOM에 적용
| v-model | 양방향 바인딩 처리를 위해서 사용 (form의 input, textarea) |
| v-bind | - 엘리먼트의 속성과 바인딩 처리를 위해서 사용 - 약어로 : 로 사용 가능 |
| v-show | - 조건에 따라 엘리먼트를 화면에 출력 - style의 display를 none으로 변경한 것! *렌더링은 됨 |
| v-if v-else-if v-else |
조건에 따라 엘리먼트를 화면에 렌더링 * 렌더링 되지 않는 부분 = html 주석문으로 표시 됨 |
| v-for | - 배열이나 객체의 반복에 사용
|
| v-cloak | - Vue Instance가 준비될 때까지 mustache 바인딩을 숨기는데 사용 - [v-cloak]{display:none} 과 같은 CSS 규칙과 함께 사용 - Vue Instance가 준비되면 v-cloak는 제거됨 |
template
* 여러 개의 태그들을 묶어서 처리해야 할 경우 사용
* v-if, v-for, component 등과 함께 많이 사용
* 화면에 나타나지 않음 ( 투명 tag 느낌 ~ )
Vue method
- Vue Instance는 생성과 관련된 data 및 method 정의 가능
- method 안에서 data를 this.데이터이름 으로 접근 가능
'WEB > front-end' 카테고리의 다른 글
| [Vue 기초 3] Event, Binding (0) | 2023.05.05 |
|---|---|
| [Vue 기초 2] Vue Instance 속성 (method, filter, computed, watch) (0) | 2023.05.04 |
| JSON (JavaScript Object Notation) (0) | 2023.04.27 |
| Event Handler (0) | 2023.04.27 |
| Ajax (Asynchronous JavaScript and XML) 정리 (0) | 2023.04.26 |
