Vue.js 기본 구조(MVVM 패턴)
2021. 9. 3. 11:38ㆍ카테고리 없음
Vue.js 공식 사이트 : https://kr.vuejs.org/v2/guide/index.html
시작하기 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
- CDN 스크립트
<script src="https://cdn.jsdelivr.net/npm/vue"></script>해당 스크립트는 상용 버전이며, 속도와 용량이 최적화됨
- MVVM 패턴 예제
<!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>hello vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="simple">
<h2>{{message}}</h2>
</div>
<script type="text/javascript">
var model = {
message: '첫 번째 Vue.js 앱입니다.'
};
var simple = new Vue({
el: '#simple',
data: model
});
</script>
</body>
</html>- model 변수 : MVVM 패턴 중에서 Model 객체의 역할
전달할 데이터를 객체의 형태로 저장하고 있음
- simple 변수 : MVVM 패턴 중에서 View Model 객체의 역할
Vue 객체의 el 속성은 HTML 요소를 나타냄
data속성은 Model 객체를 참조
- HTML 요소 : 템플릿 표현식 == {{}}
템플릿 표현식을 이용해 HTML DOM에 데이터를 렌더링