// 인스턴스는 아래와 같이 생성
new Vue();
// 변수에 할당 가능하다.
const vm = new Vue({
el: '#app',
data: {
message: 'hi'
}
});});
console에 위에서 할당한 vm을 입력하면
인스턴스 내에 어떤 속성과 API가 있는지 확인 가능하다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="app">
<!-- ... -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hi'
}
});
</script>
</body>
</html>
일반적인 자바스크립트 생성자 함수
함수를 이용해서 어떤 정보를 담은 객체를 생성하는것이
생성자 함수의 기본적인 객체생성 패턴이다.
new Vue()
를 쓰는 이유
위와 같이 vm 내에서
매번 함수를 정의하는것이 아니라 미리 정의된 함수를 사용할 수 있다.
따라서 Vue는 생성자함수로 Vue에서 api나 속성들을 정의해놓고
갖다쓰거나 재사용하는 구조를 가지고 있다.
// key : value, 형태
new Vue({
el: ,
template: ,
data: ,
methods: ,
created: ,
watch: ,
})
options
const options = {
el: '#app',
data: {
message: 'hi'
}
}
const vm = new Vue(options);
위의 옵션 표기와 결과는 같다.
Vue 공식문서에서 나오는 코드나 가독성은 아래의 객체리터럴 방식이 더 좋다.
const vm = new Vue({
el: '#app',
data: {
message: 'hi'
}
});