Vue 12 - 싱글 파일 컴포넌트(Single File Component)

이전에 컴포넌트를 만들때, Vue.component하고 안에 템플릿 넣고...

이런방식으로 작성했었다.

 

하지만 vue 파일로 작성하면 조금 다르다.

 

 

Home.vue을 다시 작성해보면

세가지구역으로 먼저 나누고(템플릿, 스크립트, 스타일) 작성하면 된다. 

  style에 scoped를 주지않으면, 전체에 적용된다. 

 

<template>
  <div>
    <h1>kossie coder</h1>
  </div>
</template>

<script>
export default {}

</script>

<style scoped>
</style>

데이터와 스타일을 넣어보면

<template>
  <div>
    <h1>This is Home page</h1>
    <p>{{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name : 'Kossie Coder'
    }
  }
}
</script>

<style scoped>
h1 {
  color : teal;
}
</style>

data는 이전과 같이 함수로 가져온다. (obj는 주소를 참조하기때문에)

 

전체 페이지부분이라 view폴더에 작성하였고, 더 작은단위들은 component폴더에 정리.

 

 

예제) 컴포넌트를 하나만들고, 연결해보자.

 컴포넌트폴더에 KossieCoder.vue생성

//src/components/KossieCoder.vue

<template>
  <div>
    <p> {{name}}</p>
    <button @click="updateName">Change Name</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'Kossie Coder',
    }
  },
  methods: {
    updateName() {
          this.name = 'Kossie Coder Updated'
        }
      }
  }
</script>
<style scoped>

</style>

이 컴포넌틀를 Home에 렌더링 시킬것이니,  import하고 컴포넌트 등록하기

 

//src/views/Home.vue

<template>
  <div>
    <h1>This is Home page</h1>
    <KossieCoder/>
  </div>
</template>

<script>
import KossieCoder from '../components/KossieCoder.vue';

export default {
  components: {
    KossieCoder
  },
  data() {
    return {
      name : 'Kossie Coder'
    }
  }
}
</script>

<style scoped>
h1 {
  color : teal;
}
</style>

 

 

참고 : https://opentutorials.org/course/4091/27695