반응형
인스턴스란?
- Vue로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위
인스턴스 생성
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>를 써줌으로서 Vue를 사용할 수 있음
<!DOCTYPE html>
<html lang="en">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div id="test">
<div>{{data01}}</div>
<div>{{data02}}</div>
</div>
<div>{{data03}}</div>
</body>
<script>
new Vue({
el: "#test",
data: {
data01: '1번째 데이터',
data02: '2번째 데이터',
data03: '3번째 데이터',
},
});
</script>
</html>- new Vue({ }); 를 통해 Vue 인스턴스 생성
- 인스턴스에는 el, data, methods 등의 속성들을 넣을 수 있음.
el 속성
- 위 코드에서 첫번째 div의 id를 test로 정해주었고, el 속성에 #test를 넣어줌
- 이를 통해 첫번째 div 안에서는 생성된 Vue 인스턴스를 사용할 수 있지만, 첫번째 div 밖에서는 사용할 수 없음
- 따라서 {{data03}}은 첫번째 div 밖에 있으므로 data를 불러오지 못하고, 실행시키면 아래 그림과 같이 출력됨
data 속성
- data 속성 안에 data01, data02, data03을 선언해 줬는데, 이것들은 변수라고 생각하면 될 듯
- 따로 자료형을 지정해줄 필요는 없음
- 그리고 이 변수들을 html 코드에서 사용하고 싶으면 중괄호 두개를 쓰고 안에 변수명을 적어주면 됨
methods 속성
<body>
<div id="test">
<div>{{num}}</div>
<button v-on:click="BtnClick">숫자 증가</button>
</div>
</body>
<script>
new Vue({
el: "#test",
data: {
num: 1,
},
methods: {
BtnClick(){
this.num ++;
},
},
});
</script>- 다음과 같이 body태그와 script태그의 코드를 수정
- methods 속성 안에 BtnClick() 메소드를 선언해 줌
- html에서 button이 클릭되면 BtnClick() 메소드를 호출하고, BtnClick() 메소드 안에서는 data의 num을 1 증가시켜 줌 (여기서 this는 data를 가리키게 됨)
- 결과적으로 data 속성은 변수, methods 속성은 메소드를 선언하는 부분이라고 생각하면 될 듯
결과
- 처음 출력 결과
- 버튼 누른 후 결과
반응형
'Vue.js' 카테고리의 다른 글
| [Vue.js] v-for(index), 배열 (0) | 2021.08.22 |
|---|---|
| [Vue.js] props속성, v-bind, camelCase, kebab-case (0) | 2021.08.21 |
| [Vue.js] 컴포넌트(전역 컴포넌트, 지역 컴포넌트) (0) | 2021.08.20 |
| [Vue.js] v-model, v-on:submit, 랜덤숫자생성, event.preventDefault() (0) | 2021.08.20 |
| [Vue.js] v-if, v-else, v-else-if, v-on:click (0) | 2021.08.19 |