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

# 싱글 파일 컴포넌트에 배운 내용 적용하여 개발 시작하기

<script>

// new Vue({

// data: {

//     str: 'hi'

// }

// })

export default {

    data: function(){

        return {

            str: 'hi'

        }

    }

}

</script>

싱글 파일 컴포넌트로 넘어오면, 모두 위의 방식에서 아래 방식으로 전환된다.(export default 기능 사용)

 

# 싱글 파일 컴포넌트 체계에서 컴포넌트 등록하기

Tip.컴포넌트이름은 Pascal Case 무조건 대문자로 시작하게 만들기

// 1. vue 명령어로 기본 템플릿 생성

<template>

  // 2. html template 작성

  <header>

    // 4. props 데이터 바인딩

    <h1>{{ propsdata }}</h1>

    // 6. v-on:<이벤트명>="메소드명"

    <button v-on:click="sendEvent">send</button>

  </header>

</template>

<script>

export default {

  // 3. props: ['props명'] 지정 <부모 -> 자식 데이터 전달용>

  props: ['propsdata'],

  // 5. methods: 메소드명 지정 <자식 -> 부모 데이터 전달용>

  methods: {

    sendEvent: function() {

      this.$emit('renew');

    }

  }

}

</script>

<style>

</style>

... AppHeader.vue

 

# 싱글 파일 컴포넌트에서, props, event emit 구현하기

<template>

  <div>

    <!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header> -->

    // 4. 지역 컴포넌트 사용

    <app-header 

      // 5. 부모 컴포넌트에서 자식 컴포넌트로 데이터 이동(props)

      // v-bind:<자식컴포넌트 props명>="<부모컴포넌트 data명>" 

      v-bind:propsdata="str"

      // 6. 자식 컴포넌트에서 부모 컴포넌트로 데이터 이동(event)

      // v-on:<자식컴포넌트 event명>="<부모컴포넌트 method명>"

      v-on:renew="renewStr"></app-header>

  </div>

</template>

<script>

// 2. 싱글 파일 컴포넌트 가져오기

import AppHeader from './components/AppHeader.vue';

export default {

  data: function() {

    return {

      str: 'Header'

    }

  },

  // 1. 지역 컴포넌트 정의

  components: {

    // 3. 지역컴포넌트명 설정

    'app-header': AppHeader

  },

  methods: {

    renewStr: function() {

      this.str = 'hi';

    }

  }

}

</script>

...App.vue

 

# Vue CLI 생성 프로젝트 내용 정리

1. vue-cli 글로벌 설치

2. vue create <프로젝트명>

3. cd <프로젝트명>

4. npm run serve로 기본 프로젝트 시작

5. public/index.html이 메인 파일이고, 컴파일 될 때 <div id="app"></div> 밑에 vue가 알아서, 컴포넌트들을 inject 시켜주는 방식으로 동작함