[Vue.js] 배운 내용들 Vue Cli로 마이그레이션 해보기

Vue Cli를 통해 컴포넌트 만들어보기

• 아래와 같이 Vue CLI를 통해 AppHeader 컴포넌트를 만들고, Props 내리기, Event 올리기를 해보았다.
• data()로 달라진 점 주석에 설명이 되어 있으며, 해당 부분 이외엔 특별히 다른점이 없다.
• 이제 이정도면 Vue를 통해 개발을 시작할 준비가 되었다.
• 중급 강의를 들으러 가기 전 마지막 사용자 입력 폼 하나를 만들어 볼 예정이다.

//@ App.vue

<template>
  <div>
    <div>{{ str }}</div>
    <!-- <AppHeader v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></AppHeader> -->
    <AppHeader v-bind:propsdata="str" v-on:renew="renewStr"></AppHeader>
    <!-- <app-header></app-header> -->
  </div>
</template>
<script>
import AppHeader from './components/AppHeader.vue';

// let AppHeader = {
//   template: '<header><h1>Header</h1></header>',
// };

// 인스턴스 옵션에서 data가 그냥 객체 리터럴이었는데,
// vue CLI에서는 data() 함수형태이다.
// 이는 컴포넌트를 재사용할 것이고,
// 데이터가 컴포넌트 간 간섭되지 않도록 하기 위함이다.

// new Vue({
//   data: {
//     str: 'hi',
//   },
// });

export default {
  data() {
    return {
      str: 'Header',
    };
  },
  components: {
    AppHeader,
  },
  methods: {
    renewStr() {
      this.str = 'hi';
    },
  },
};
</script>
<style scoped></style>

// @ components/AppHeader.vue

<template>
  <header>
    <h1>{{ propsdata }}</h1>
    <button v-on:click="sendEvent">send</button>
  </header>
</template>
<script>
export default {
  props: ['propsdata'],
  methods: {
    sendEvent() {
      this.$emit('renew');
    },
  },
};
</script>
<style scoped></style>