[Vue.js] 싱글파일 컴포넌트

싱글파일 컴포넌트

한 파일에 HTML, Javascript, CSS를 관리하는 컴포넌트 방식을 싱글파일 컴포넌트라고 합니다.

vetur 플러그인을 사용해 vue 단축키로 손쉽게 싱글파일 컴포넌트를 생성해줄 수 있습니다.

var appHeader = {
    template: '<div>header</div>',
    methods: {
        addNum: function() {

        }
    }
}

new Vue({
   el: '#app',
   components: {
       'app-header': appHeader
   } 
});


<template>
  <div>header</div>
</template>

<script>
export default {
    //Javascript - 인스턴스 옵션
    methods: {
        addNum: function() {

        }
    }
}
</script>

<style>
 /* CSS */
</style>

기본 강의에서 var appHeader로 정해줬던 컴포넌트를 싱글파일화 시킨 것입니다. 상단 코드에 new Vue로 주입해준 컴포넌트까지의 코드를 하단의 template으로 나타냈다고 보면 됩니다.

그리고 컴포넌트 주입방식이 아래 코드와 같이 소폭 변화가 있습니다.

import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}

export default 가 곧 new Vue({})와 같은 의미입니다.

---

참고자료

• 인프런 - 캡틴판교 Vue.js 시작하기