Vue export import 그리고 GitHub 이미지 활용

data() 의 양이 너무 많으면 문서의 양이 너무 길어짐

그래서 자바구조마냥 문서를 하나 따로 만들고 그걸 첨부(import)하는거임 

외부 문서에서는 자기자신을 export 해서 전송

 

(App.vue)
import data(작명) from './oneroom.js파일경로'

data(){
  return {
    원룸들 : data(작명)
  }
}

이런식으로 임포트 시켜줌 data() 위에 명령어 위치

 

(oneroom.js)
export default 위에있던원룸들데이터

이런식으로 익스포트 시켜줌 

 

<template>
  <div class="menu">
    <a v-for="(item, i) in menus" :key="i"> {{ item }} </a>
  </div>

  <!-- modal popup -->
  <div class="black-bg" v-if="flag == true">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세페이지내용임</p>
      <button @click="flag = false">닫기</button>
    </div>
  </div>
  <!-- -----end-------- -->


  <!-- item list -->
  <div v-for="(item, i) in onerooms" :key="i">
    <img @click="flag = true" :src="onerooms[i].image" class="room-img" />
    <p>{{ onerooms[i].title }}</p>
    <p>{{ onerooms[i].price }}만원</p>
    <button v-on:click="count[i]++">허위매물신고</button>
    <span>신고수 : {{ count[i] }}</span>
  </div>
  <!-- item list end -->

</template>



<script>
import dada from "./assets/oneroom.js";

export default {
  name: "App",

  data() {
    return {
      onerooms: dada,
      flag: false,
      count: [0, 0, 0],
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
      menus: ["HOME", "Products", "Help"],
    };
  },

  methods: {
    increse() {
      this.count++;
    },
  },

  components: {},
};
</script>

실제로 만든거

만들면서 활용한 문법은 v-for 를 이용해서 반복주는거 , 속성에 데이터바인딩  : src  그리고 HTML에 데이터 바인딩

v-for index 를 키값으로 넣어서 보기좋게 만들었음

다 알고있었다고 생각했는데 속성에 데이터 바인딩할때 쫌 헷갈렸음  :src ="onerooms[i].image"

말고는 기존에 하드코딩 한거에서 숫자 - > i 넣기여서 쉬웠음

 

그리고 깃허브에 이미지 저장해서 이미지 소스 주소를 리포지토리 주소로 주면 이미지 불러올수있음 깃허브를 참고해서

이미지를 저장소에 넣고 클릭클릭해서 들어가면 여기까지옴 

여기서 Download 누르면 한번더 사진만보이는 페이지로 넘어가는데 그 주소를 넣어주면 잘 작동함

그 외 주소는 작동안함