Vue로 블로그 만들기 - 2.글목록 만들기

 

vue/no-multiple-template-root

 

App.vue에서 안에 nav와 div를 짜고있는데 이런 에러가 발생했다.

blog 폴더만 오픈폴더 했어야했는데 blog의 상위 폴더까지 오픈폴더하고 있으니 생긴 에러란다.

즉, 현재 앱의 루트를 폴더의 루트로 해야한다는 것이다.

 

List.vue 컴포넌트 생성하기

• components 폴더 안에 List.vue를 생성 후 마크업한다.

App.vue에 List 컴포넌트 Import하기

<script>
import List from "./components/List.vue";

export default {
  name: "App",
  components: {
    List: List,
  },
};
</script>

 

더미데이터 생성

• assets 폴더 하위에 blog.js 파일을 만들어 더미데이터를 넣고 export 해준다. 이 더미데이터는 Array다.

export default [
  {
    title: "스위트홈 시즌2",
    content: "욕망이 괴물이 되는 세상. 그린홈을 떠나 새로운 터전에서 살아남기 위해 각자의 사투를 벌이는 현수와 그린홈의 생존자들, 그리고 또 다른 존재의 등장과 알 수 없는 미스터리한 현상들까지. 새로운 욕망과 사건, 사투를 그린 넷플릭스 시리즈",
    date: "2023.12.01",
    number: 0,
  },
  {
    title: "이두나!",
    content: "평범한 대학생 원준이 셰어하우스에서 화려한 K-POP 아이돌 시절을 뒤로 하고 은퇴한 두나를 만나게 되며 벌어지는 이야기를 담은 로맨스 드라마",
    date: "2023.10.20",
    number: 1,
  },
  {
    title: "연인",
    content:"병자호란을 겪으며 엇갈리는 연인들의 사랑과 백성들의 생명력을 다룬 휴먼역사멜로 드라마",
    date: "2023.08.04",
    number: 2,
  },
];

 

App.vue로 더미데이터 가져오기

<script>
import List from "./components/List.vue";
import data from "./assets/blog.js";

export default {
  name: "App",
  data() {
    return {
      blogData: data,
    };
  },
  components: {
    List: List,
  },
};
</script>

App.vue에서 List 컴포넌트에 데이터 전송하기

<template>

  <List :blogData="blogData" />
  
</template>

List.vue에서 부모가 보낸 데이터 props 받아오기

<template>
  <div>
    <h5>{{ blogData[0].title }}</h5>
    <p>{{ blogData[0].date }}</p>
  </div>
  <div>
    <h5>{{ blogData[1].title }}</h5>
    <p>{{ blogData[1].date }}</p>
  </div>
  <div>
    <h5>{{ blogData[2].title }}</h5>
    <p>{{ blogData[2].date }}</p>
  </div>
</template>

<script>
export default {
  name: "list",
  props: {
    blogData: Array,
  },
};
</script>

<style></style>