Vue.js
Vue.js는 MVVM(Model-View-ViewModel) 아키텍처 패턴을 따르는 JavaScript 라이브러리
MVVM 구조(Model-View-ViewModel)
1. Model (모델):
- 모델은 애플리케이션의 데이터 및 비즈니스 로직을 나타냄
- 데이터의 상태 및 속성을 저장하고 관리. 서버에서 가져온 데이터, 사용자 입력, 또는 애플리케이션 내부에서 생성된 데이터 등
- Vue.js에서 모델은 JavaScript 객체 또는 배열로 표현되며, 애플리케이션의 데이터 상태를 나타내는 역할
2. View (뷰):
- 뷰는 사용자 인터페이스(UI) 나타냄. 웹 페이지의 HTML 요소들, 사용자가 보는 화면 구성 요소들을 포함.
- 뷰는 사용자에게 데이터를 표시하고, 사용자 입력을 받아서 처리하는 역할.
- Vue.js에서 뷰는 HTML 템플릿으로 정의, 뷰에 데이터를 바인딩하고 상호작용할 수 있는 요소들을 정의하는 데 사용.
3. ViewModel (뷰 모델):
- ViewModel은 모델과 뷰 사이의 중간 계층. Vue.js에서 ViewModel은 Vue 인스턴스로 표현됨.
- ViewModel은 모델의 데이터를 뷰에 바인딩하고, 뷰에서 발생하는 사용자 입력을 모델로 전달. 이를 통해 모델과 뷰 간의 결합을 제어하고 데이터 흐름을 관리.
- ViewModel은 뷰를 관리하고 뷰의 상태를 감시하여 필요한 경우 모델과 동기화. 뷰와 모델 간의 양방향 데이터 바인딩을 가능하게 함.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
<p>{{count}}회</p>
<button v-on:click="countUp">증가</button>
<button v-on:click="countDown">감소</button>
</div>
<script>
new Vue({
el : "#app",
data : {
count : 0
},
methods: {
countUp: function(){
this.count++;
},
countDown: function(){
this.count--;
},
}
})
</script>
</body>
</html>
'국비지원 > 백엔드' 카테고리의 다른 글
| 230117 JSP란? (0) | 2023.01.17 |
|---|---|
| 230113 JSP 참고 링크 (0) | 2023.01.13 |
| 221230 JSP에서 jQuery 사용하기 (0) | 2022.12.30 |
| 221222 chap14_1 (0) | 2022.12.22 |
| 221221 LiveSQL을 통한 Oracle DB 실습 (0) | 2022.12.22 |