뷰를 사용하기 위해서는 뷰 인스턴스를 생성하고 ,
그 인스턴스를 변수에 저장해주고,
바디 내의 엘리먼트와 연결? 해주는 작업이 필요하다.
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({ // view라는 인스턴스를 생성해줘야 하고 보통 이 인스턴스는 vm이라는 이름의 변수에 담아준다.
el : '#app' ,// 이 바디 안에 있는 app이라는 엘리먼트에 뷰의 속성을 넣어주겠다!!
// 이 코드가 없으면 밑에다 아무리 설정을 해줘도 소용이 없음.
data: {
message : 'hi'
}
});
</script>
</body>
뷰 객체의 인스턴스는 화면 소스 내에서 특정 태그를 시작으로 그려진다. 그리고 객체 생성시 옵션값들을 가진 객체를 인자로 받아 생성되고, 인스턴스에서 사용할 수 있는 속성은 다음과 같다.
<script>
var vm = new Vue({ // view 인스턴스를 생성할 때 옵션을 담은 객체를 넣어서 생성해준다.
el : , //인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그)
template : , //화면에 표시할 요소 HTML, CSS 등
data: {
message : 'hi' //뷰의 반응성(Reactivity)가 반영된 데이터 속성
},
methods: { //화면의 동작과 이벤트 로직을 제어하는 메서드
},
created : function () { //뷰의 라이프 사이클과 관련된 속성
},
watch : // data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성
});
</script>
해당 포스팅은 인프런의 Vue.js 시작하기 - Age of Vue.js 학습 후 정리한 내용임을 알려드립니다.
'Study > Vue' 카테고리의 다른 글
| Vue.js 시작하기 06. 뷰 라우터 (0) | 2022.01.20 |
|---|---|
| Vue.js 시작하기 05. 컴포넌트 레벨 간의 통신 방법 (0) | 2022.01.19 |
| Vue.js 시작하기 04. 컴포넌트 통신방식 (0) | 2022.01.19 |
| Vue.js 시작하기 03. 컴포넌트 (0) | 2022.01.18 |
| Vue.js 시작하기 01. MVVM 모델에서의 뷰 (0) | 2022.01.17 |