참고)
javascript의 인스턴스[TIL]Javascript - 객체지향 class (ES5/ES6)
✅ Vue 인스턴스 - 공식문서
Vue에서 인스턴스를 생성하는 방법
var vm = new Vue({
// 옵션
})
의미
<!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>
// 인스턴스 만들 때 : new Vue()
var vm = new Vue({
// body태그 안에서 #app를 찾아서 인스턴스를 붙임
// el: 를 지정해줘야한 #app안에서 vue의 기능과 속성들이 유효함.
el: "#app",
data: {
message: "hi",
},
// [인스턴스에서 사용가능한 속성, API]
el: {},
template: {},
data: {},
methods: {},
created: function () {},
watch: {},
});
</script>
</body>
</html>
javascript는 보통 아래과 같인 작성하지만
vue 공식문서에서는 변수로 구분하지 않고 위와같이 객체를 인스턴스에 바로 넣는 방법을 추천
- 가독성
var options = {
el: "#app",
data: {
message: "hi",
},
methodes: {
},
};
var vm = new Vue(option);
반응형
'D.evelop > Vue.js' 카테고리의 다른 글
| [Vue.js] Node 버전에 의한 오류 (0) | 2022.06.21 |
|---|---|
| [Vue.js] CLI 생성 (0) | 2022.04.20 |
| [Vue.js] Component 컴포넌트 (0) | 2022.02.04 |
| [Vue.js] Reactivity 반응성 (0) | 2022.01.26 |
| [Vue.js] 시작 전 환경세팅 (0) | 2022.01.26 |
댓글