6. Vue js - 데이터 가져오기 내보내기(import / export) - feat v-for

ㅁ 데이터 가져오기 내보내기

ㅇ 사용용도

 > 데이터(값, 이름, 기타 드럼 등등)를 가져와서 화면에 뿌링글 할때 사용함

---

ㅇ 데이터파일 만들기

assets 폴더 하위 data.js

ㅇ 데이터 내용은 아래와 같습니다.

ㅇ 데이터는 오브젝트 형식으로 만들어짐 [ 값, 

export default

[

    {

    id : 0,

    title: "0번 데이터 입니다.",    

    content: "0번 데이터 입니다.",    

    },

    {

    id : 1,

    title: "1번 데이터 입니다.",    

    content: "1번 데이터 입니다.",    

    },

    {

    id : 2,

    title: "2번 데이터 입니다.",    

    content: "2번 데이터 입니다.",    

    },

    {

    id : 3,

    title: "3번 데이터 입니다.",    

    content: "3번 데이터 입니다.",    

    },

    {

    id : 4,

    title: "4번 데이터 입니다.",    

    content: "4번 데이터 입니다.",    

    },

];

---

ㅁ App.vue data.js 가져오기 feat 하드코딩

<template>  

  <div>

    <div>data.js 안에 0번째 id값 = {{ data[0].id }}</div> <!-- 3. 데이터 값 화면에 뿌링글  -->

    <div>data.js 안에 0번째 title값 = {{ data[0].title }}</div> <!-- 3. 데이터 값 화면에 뿌링글  -->

    <div>data.js 안에 0번째 content값 = {{ data[0].content }}</div> <!-- 3. 데이터 값 화면에 뿌링글  -->

  </div>    

<br>

</template>

<script>

import data from './assets/data.js';   // 1. data.js 데이터 가져오기 2. App.vue 에서 사용할 변수 이름 data

 

export default {

  name: 'App',  

  data() {

    return {            

      data : data,  // 2. 오브젝트 형식 { 키(key), 값(Value)}

    }

  },  

}

</script>

<style>

body {

  text-align: center;

}

</style>

---

ㅁ App.vue data.js 가져오기 feat v-for

https://jsvue.tistory.com/15?category=978073 

 

<template>  

  <div>

    <div v-for="(데이터들, i) in data" :key="i">

<!-- 

 v-for="반복문이름 in 메뉴들" :key="반복문이름">{{반복문이름}}

 v-for="(반복문이름, 반복문고유key) in 메뉴들" :key="반복문고유key">{{반복문이름}} 고유 key 자리는 몇번 반복 할껀지 정의

-->    

      <div>data.js 안에 0번째 id값 = {{ data[i].id }}</div> <!-- 3. 데이터 값 화면에 뿌링글  -->

      <div>data.js 안에 0번째 title값 = {{ data[i].title }}</div> <!-- 3. 데이터 값 화면에 뿌링글  -->

      <div>data.js 안에 0번째 content값 = {{ data[i].content }}</div> <!-- 3. 데이터 값 화면에 뿌링글  -->      

    </div>    

  </div>    

</template>

<script>

import data from './assets/data.js';   // 1. data.js 데이터 가져오기 2. App.vue 에서 사용할 변수 이름 data

export default {

  name: 'App',  

  data() {

    return {            

      data : data,  // 2. 오브젝트 형식 { 키(key), 값(Value)}

    }

  },  

}

</script>

<style>

body {

  text-align: center;

}

</style>