Vue - 학습 기록 앱 만들기 1 : Resources & Styling

Learning Resource + Styling

App.vue는 Root Component이기 때문에 Template에 최대한 MarkUp이 없게 만들어야 합니다.

Data 프로퍼티에 더미 데이터 배열을 만들고 그 데이터를 Stored-Resource로 넘겨주고,

Stored-Resource는 배열을 받고 순회 하면서 데이터를 Learning-Resource로 바인딩합니다.

Style 부분은 전역 스타일 설정은 왠만하면 App.vue에 지정하고 나머지 컴포넌트들에는 scoped style을 적용하였습니다.

---

App.vue

<template>  
  <ul>  
    <stored-resources  
        :resources="storedResources"  
    ></stored-resources>  
  </ul>  
</template>  

<script>  
import StoredResources from "@/components/Learing-Resources/StoredResources";  

export default {  
  components: { StoredResources },  

  data() {  
    return {  
      storedResources: [  
        {  
          id: 'official-guide',  
          title: 'Official Guide',  
          description: 'The Official Vue.js Documentation',  
          link: 'https://vuejs.org'  
        },  
        {  
          id: 'google',  
          title: 'Google',  
          description: 'The Official Google Documentation',  
          link: 'https://google.org'  
        },  
      ]  
    };  
  },  
}  
</script>  

<style>  
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');  

* {  
  box-sizing: border-box;  
}  

html {  
  font-family: 'Roboto', sans-serif;  
}  

body {  
  margin: 0;  
}  
</style>

LearningResource.vue

<template>  
  <li>  
    <div>  
      <header>  
        <h3>{{ title }}</h3>  
        <button>Delete</button>  
      </header>  
    </div>  

    <p>{{ description }}</p>  

    <nav>  
      <a :href="link">View Resource</a>  
    </nav>  
  </li>  
</template>  

<script>  
export default {  
  props: ['title', 'description', 'link'],  

}  
</script>  

<style scoped>  
li {  
  margin: auto;  
  max-width: 40rem;  
}  

header {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
}  

h3 {  
  font-size: 1.25rem;  
  margin: 0.5rem 0;  
}  

p {  
  margin: 0.5rem 0;  
}  

a {  
  text-decoration: none;  
  color: #ce5c00;  
}  

a:hover,  
a:active {  
  color: #c89300;  
}  
</style>

StoredResources.vue

<template>  
  <ul>  
    <learning-resource  
        v-for="res in resources"  
        :key="res.id"  
        :title="res.title"  
        :description="res.description"  
        :link="res.link"  
    ></learning-resource>  
  </ul>  
</template>  

<script>  
import LearningResource from "@/components/Learing-Resources/LearningResource";  

export default {  
  components: { LearningResource },  

  props: ['resources'],  
}  
</script>  

<style scoped>  
ul {  
  list-style: none;  
  margin: 0;  
  padding: 0;  
  margin: auto;  
  max-width: 40rem;  
}  
</style>

결과물