1. data
data는 위의 모습처럼 사용할 수 있다.
data() {
return {
messsage: "Hello World",
};
},message에 Hello World를 넣어보았다.
다음은 template에 mustache문법으로 쓰여진 {{message}}를 주목하자.
해당 위치에 data에 넣은 message에 관련된 내용이 출력되게 된다.
data는 이렇게 말 그대로 data부분을 선언하는 영역이다.
2. methods
methods는 메소드들을 정의하는 공간이다.
빨간 네모안을 참고해보면, printHello라는 메소드를 만들었고, 그 method를 mustache문법으로 출력하였다.
해당 화면의 결과이다.
다음은 method에서 data영역에 있는 message를 이용하여 출력하여 보자.
data에 있는 데이터를 활용하기 위해서는 this.{원하는필드}의 형태로 가져오면 된다.
역시 methods에 있는 영역도 this.{원하는 메소드}의 형태로 가져올 수 있다.
3. components
다음은 components이다. 해당 속성은 다른 component를 추가할때 활용 할 수 있다.
먼저 컴포넌트를 하나 생성해보자.
간단하게 컴포넌트를 생성해보았다.
이 컴포넌트를 아까 사용하던 App.vue에서 가져와보도록 하자.
이렇게 코드를 추가하면 TestComponent.vue에 입력한 내용이 보이게 된다.
이렇게 컴포넌트를 여러개 선언할 수도 있다.
위의 내용을 보면서 알 수 있는 것은 컴포넌트는 재사용이 가능하다는 점이다.
실제로 개발을 진행할 때 자주 사용하는 화면이 존재하는데 해당 내용들을 저렇게 컴포넌트화 시키면 필요할때마다 쉽게 사용 할 수 있게 된다.
