[Vue] import 와 export 하기

1. export (내보내기) 하기

 

object자료형으로 정보가 담긴 js파일을 script에 import 하기 위해서는 

 

별도의 파일을 하나 생성해서 objuect자료의 내용을 담는다.

 

자료형 앞에는 export default라고 적어야 한다.

예시 (js파일 별도로 하나 만듦)

---

2. import 하기

 

📎주의사항!!!

vue에서 경로지정시에는 ' ./ ' <-현재폴더 시작해야 한다.

 

App.vue 파일 내 script 안에 import를 해주면 된다.

 

import '변수명' from '경로'

data안에 roomInformation: oneroomData라고 지정했다.

 

---

3. 중복되는 코드 반복문 사용하기

[before]

내가 짠 코드 엉망진창ㅋㅋ

코드를 짜다가 허위매물신고의 버튼도 개별적으로 버튼이 동작하게 만들고 싶어졌다. (사람 욕심은 끝이 없..)

팀장님께 여쭤봐서 다시 짠 코드

 

[after]

  <div v-for="(infor, index) in roomInformation" :key="index">
    <img class="roomImg" :src="infor.image" alt="">
    <h4 @click="modalOpen = true">{{infor.title}}</h4>
    <p>{{ infor.price }}원</p>
    <p>{{ infor.content }}</p>
    <button v-on:click="report(index)">허위매물신고</button> <span>신고수 : {{신고수[index]}}</span>
  </div>

 

이미지 데이터 바인딩 하는 방법

<img class="roomImg" :src="infor.image" alt="">

src 앞에 콜론을 붙여야 한다.

 

 

 

veu3에서는 고유한 key 값을 넣어야 한다. 혹시몰라서 없애봤더니 error가 나더라.

<div v-for="(infor, index) in roomInformation" :key="index">

infor라는 인자를 넣었고 반복횟수는 roomInformation의 길이만큼 반복한다.

data.js내 array 안에는 총 6개의 object가 있다. (6회 반복)

:key 값은 보통 index의 명칭으로 지으며,

2.2.0이상에서는 v-for는 key값은 필수이다.

 

---

key값 사용하는 이유
1. 가상 dom을 사용해 반복문을 만들어내는데 고유요소를 식별하기 위해서이다.
2. 배열 요소가 중복될 수 있으므로 key값을 문자열형태보다 원소에 접근가능한 index값을 파라미터로 받아와 사용한다.

---

반복해야 하는 가격과 content는 바인딩을 통해 넣어준다.

 

허위매물신고 버튼의 경우 roomInformation의 횟수만큼 반복되며 각기 다른 버튼으로 작동을 하며,

아래처럼 methods(함수)구문에 index값을 넣어 연결해준다.

export default {
  name: 'App',
  data(){
    return {
      roomInformation : oneroomData,
      modalOpen : false,
      신고수 : [0,0,0,0,0,0],
      menu : ['Home', 'Products','About'],
      products : ['역삼동원룸','천호동원룸','마포구원룸', '광진구원룸'],
      price : [70, 50, 30, 50],
    }
  },
  methods : {
    report(index){
      this.신고수[index]++;
      this.$forceUpdate();//바로바로 화면이 랜더링된다.
    }
  },
  components: {}
}

 

---

카테고리마다 title을 누르면 해당 title과 설명을 보여주는 모달창 보여주기

 

title을 눌렀을 때 그에 해당하는 모달창을 보여주어야 하므로, 

하드코딩으로 몇번째의 값을 받아오면 안된다.

 

이렇게 하면 안됨. (왜냐하면 모든 상품의 title을 눌렀을 때 0번째의 title과 content내용만 불러오기 때문이다.)

 

 

---

 

 

data() {} <-안에는 사용자가 몇번째를 눌렀는지 기록하는 초기값을 넣어놓는다.

 

상품의 title을 눌렀을 때 몇번째 인지의 값을 알아야 하므로 @click 안에 userPush를 지정한 뒤 반복 회수 지정.

(상품은 총 6개가 있으므로 for문이 돌면서 0~5까지 총 6번이 돈다)

 

사용자가 누른 값에 맞춰서 modal창 내부의 내용도 달라져야 하므로 

 

이렇게 값을 지정해야 사용자가 클릭한 title에 따라 해당 내용이 유연하게 바뀔 수 있다.