vue 예제 분석
<html>
<head>
<meta charset="utf-8">
<title>hello vue.js</title>
<script src="http://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="simple">
<h2>{{message}}</h2>
</div>
<script tpye="text/javascript">
var model = {
message: 'Hello Vue.js World!'
};
var simple = new Vue({
el: '#simple',
data: model
})
</script>
</body>
</html>
Model 객체는 변수명 그대로 모델 객체이다.
데이터를 가지고 있음
SImple 객체는 Vue 객체이자 뷰모델 객체이다.
Vue 객체의 el 속성의 html 요소를 나타낸다. 또한 data 속성을 모델 객체를 참조한다.
vue 객체가 html 요소와 데이터를 참조하고 있다. 이제 데이터가 변경되면 뷰모델 객체는 즉시 html 요소에 반영시킨다.
html 요소에서는 {{ }}과 같은 콧수명르 닮은 모양의 템플릿 표현식을 사용해 선언ㅇ적으로 html dom에 데이터를 렌더링한다. 뷰모델 객체의 데이터 속성에서 해당 값을 이 위치에 나타낸다. 콧수염을 닮았다고 해서 콧수염 표현식(Mustache Expression)이 라고도 부르며, 문자열을 덧붙인다는 의미로 보간법(Interpolation)이라고도 한다.
이코드만으로도 모든 작업은 반응형으로 이뤄지는다. 모델을 벼경하면 뷰모델 객체를 통해 html dom에 즉시 변경된다.
'Vue.js' 카테고리의 다른 글
| [Vue.js] Event 처리 (0) | 2018.12.17 |
|---|---|
| [Vue.js] Vue instance (뷰 인스턴스) (0) | 2018.12.16 |
| [Vue.js] computed Property (계산형 속성) (0) | 2018.12.15 |
| [Vue.js] 기본 디렉티브 (0) | 2018.12.15 |
| [Vue.js] 개발환경 구축 (1) | 2018.12.15 |