[Vue.js] 싱글 파일 컴포넌트 (Single File Component)

• 코드 구현 (@/views/Home.vue)

<!-- html code -->
<!-- 뷰 컴포넌트는 젤 위에 하나의 태그가 먼저 존재해야함 -->
<template>
  <div>
    <h1>This is Home Page!</h1>
    <Jione/>
  </div>
</template>
<!-- option (data, methods, .. etc) -->
<script>
// @ : src
import Jione from '@/components/Jione.vue';

export default {
  components: {
    Jione
  },
};
</script>
<!-- css code (scoped : 현재 컴포넌트 내에서만 style 적용) -->
<style scoped>
h1 {
  color: royalblue;
}
</style>

 

• @/components/Jione.vue

<template>
  <div>
    <p>{{name}}</p>
    <br>
    <button @click="updateName">Change name</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
        name: 'jione',
    }
  },
  methods: {
    updateName() {
      this.name = "jione updated";
    }
  }
};
</script>
<style scoped>
</style>

 

• 실행 화면