코드(참고3)
// Define a new component called button-counter
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
JavaScript
복사
뷰는 컴포넌트를 기반으로 화면을 구성한다. 원래 컴포넌트는 Vue 변수(이게 클래스야 변수야…)의 component 메서드를 실행하면 컴포넌트가 전역에 등록되고, 이름을 통해 찾아낼 수 있도록 설계되었다. 즉, component 는 본질적으로는 자바스크립트를 이용해 만들어진다. 이렇게 만들어진 컴포넌트 객체의 타입은 Vue 클래스(참고2,3:컴포넌트의 정의)라는 점도 기억해 둘 만하다(참고6).
그래서 보통 프로젝트는 아래와 같이 작성되었다(참고4). Vue 의 component 메서드를 이용해 컴포넌트의 이름을 등록한 뒤 html 에서 해당 이름을 끌어가는 방식이다. 이러한 방식을 전역 컴포넌트(Global component)라고 부른다(참고5).
<div>
...
<button-counter> </button-counter>
...
<div>
...
<script>
// Define a new component called button-counter
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
</script>
HTML
복사
하지만 이렇게 자바스크립트만을 이용해 컴포넌트를 구성하면 프로젝트가 커졌을 때 전역에서 적절한 컴포넌트를 찾아야 하는 등 복잡해진다는 문제가 있다. 그래서 사용하는 것이 .vue 파일이다. 이것을 단일 파일 컴포넌트(Single file component)라고 한다(참고1). 이 파일을 이용하면 화면 컴포넌트별로 깔끔하게 파일을 구성할 수 있어서 직관적이고 아름다운 프로젝트 스캐폴드가 가능하다(from1). 따라서 대부분의 개발자들이 이 방법을 선택한다.
parse me : 언젠가 이 글에 쓰이면 좋을 것 같은 재료들.
1.
None
from : 과거의 어떤 생각이 이 생각을 만들었는가?
1.
supplementary : 어떤 새로운 생각이 이 문서에 작성된 생각을 뒷받침하는가?
1.
None
opposite : 어떤 새로운 생각이 이 문서에 작성된 생각과 대조되는가?
1.
None
to : 이 문서에 작성된 생각이 어떤 생각으로 발전되고 이어지는가?
참고 : 레퍼런스