2018-07-31 Vue JS-single file component(sfc)

Vue JS single file component 기반으로 공부 시작!

1.single file component ?

- *.vue 파일을 단일 파일 컴포넌트 또는 싱글 파일 컴포넌트라고 합니다.
- 그냥 사용은 못하고, vue-loader 를 통해 JS로 변환 시켜야 합니다.(webpack 에서 설정해서 사용)

2.single file componets 기반, 프로젝트

- main.js : Vue 인스턴스 생성
- index.html : SPA에서 초기에 로딩하는 HTML
- App.vue : App component

* 인스턴스 : VueJS 애플리케이션은 Vue 클래스를 초기화해 만든 Vue 객체로 부터 시작

new Vue({
  //Options..
})
생성한 Vue 객체는 최상위 객체로 동작 -> 이것을 Vue 인스턴스 -> Root Component

* 컴포넌트 : HTML을 핸들링하기 위해, CSS 및 로직 등이 추가된 요소(Element)
* Vue 컴포넌트는 지역컴포넌트 / 전역컴포넌트 2가지를 제공합니다.
* 전역컴포넌트 정의 시, 루트 컴포넌트가 초기화 되기전에 정의.(이거 때문에 동작이 안하는 -_-;;)

Vue.component('component-name', {
  //옵션..
})
component-name이 곧 HTML 태그 입니다 -> <component-name></component-name>


new Vue({
  el: '#app',
  components: {App},
  template: '<App></App>'
})

지역 컴포넌트는 componets 옵션값으로 선언해서 사용
SFC 기반 개발에서, components 옵션값으로 지역 컴포넌트 정의 시, import로 해당 컴포넌트를 포함 시켜줘야합니다.

import Example1 from './example/Example1.vue'

export default {
  name: 'Main',
  data () {
    return {
      msg: 'vue-sample-project'
    }
  },
  components: {Example1}
}

위와 같은 느낌으로.