var vm = new Vue({
// 옵션
})
관례적으로 Vue 인스턴스를 참조하기 위해 변수 vm(ViewModel의 약자)를 사용한다.
new Vue({
el: ,
template: ,
data: ,
methods: ,
created: ,
watch:
});
<html>
<head>
<title>Vue Test</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
// 인스턴스 생성
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
</body>
</html>
: 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이플 사이클 단계. 이 단계에서는 data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에도 접근할 수 없다.
this.data
or this.fetchData()
와 같은 로직을 이용해 data 속성과 methods 속성에 정의된 값에 접근할 수 있음.render()
함수로 변환 후 el 속성에 지정한 DOM에 인스턴스를 부착하기 전에 호출되는 단계.render()
함수가 호출되기 직전의 로직을 추가하기 좋다. - 가급적이면 데이터 값을 갱싱하는 로직은 beforeUpdate에 추가하는 것을 추천
- 변경 데이터의 화면 요소와 관련된 로직은 updated에 추가하는 것을 추천