@이벤트

JS에서 이벤트를 달려고 하면 onclik에 원하는 메소드를 넣어 동작을 했다. Vue에서는 @를 붙이고 원하는 이벤트를 넣을 수 있다. 아래 코드는 허위매물신고라는 버튼을 만든 후 클릭 시 해당 매물의 신고수의 갯수가 하나씩 늘어나느 코드이다.

먼저 매물의 갯수가 3개이므로 신고수의 data를 배열로 담았다. 이후 신고늘리기라는 함수를 만들어 클릭이벤트에 걸어주었다. Vue에서 함수를 만들 때는 methods 라고 선언 후 그 안에 함수를 작성하면 된다. 이후 초기화 버튼을 누르면 해당 신고수의 갯수를 0으로 초기화하는 매우 매우 간단한 함수연습 코들르 작성하였다.

<div v-for="(product,i) in products" :key="i">    
     ...
    <p>신고수 : {{신고수[i]}} </p>
    <button style="cursor:pointer; margin-right : 20px" @click="신고늘리기(i)">허위매물신고</button>
    <button style="cursor:pointer" @click="신고수[i]=0">초기화</button> 
</div>

...

export default {
  name: 'App',
  data(){
    return{
      ...
      신고수 : [0,0,0],
      ...
    }
  },

  methods : {
    신고늘리기(i) {
      this.신고수[i]++;
    }
  },
  ...
}

다음은 모달창을 만들고 모달창을 띄우는 이벤트를 연습해 보려고한다.간단하게 모달창을 하나 만들었다. 아래 코드에 나온 V-if는 thymeleaf의 if문법과 같다. 원하는 if문 “”안의 조건이되면 해당 div를 노출시킨다. 반대로 조건에 맞지 않을 경우에는 노출시키지 않는다.

<div class="black-bg" v-if="modal== true">
    <div class="white-bg">
      <span @click="modal=false" style="float : right; cursor:pointer;">x</span>
      <h4>상세페이지</h4>
      <p>상세페이지 내용</p>
    </div>
  </div>

...

<style>
body{
  margin: 0;
}
div {
  box-sizing: border-box;
}
.black-bg {
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  position: fixed; padding: 20px;
}
.white-bg{
  widows: 100%; background: white;
  border-radius: 8px;
  padding: 20px;

}

...

</style>

Import, Export

실무를 진행 하다 보면 api서버에서 필요한 데이터를 뽑아다가 쓰는 경우가 많다. 이를 연습해보기 위해 가상의 json형식의 data를 받아왔다고 생각하고 import, export하는 연습을 해보려 한다.

먼저 가상의 데이터이다. 해당 data들을 묶어 data라고 이름을 지었다. 그리고 realData.js파일에 저장을 해놓았다. 이후 해당 data를 다른 js에서도 쓸 수 있도록 export라는 것을 해줘야한다. 코드 제일 아래쪽을 보면 export default roomData 라고 적어놓았다. 이는 data라는 변수를 밖으로 빼! 라는 뜻이다. 이후 해당 데이터를 쓸 js에서 import roomData from ‘./경로/파일명.js’라고 적어주면 사용이 가능하다.

만약 하나이상의 변수를 export하고 싶다면 export {data1, data2}라고 적으면 된다. 이후 import시에도 import {data1, data2} from './경로/파일명.js'라고 적어주면 사용이 가능하다.

이때 vue에서는 import된 변수를 사용하지 않으면 에러가 발생한다!

var roomData =  [{
    id : 0,
    title: "Sinrim station 30 meters away",
    image: "https://codingapple1.github.io/vue/room0.jpg",
    content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공",
    price: 340000
    },
    {
    id : 1,
    title: "Changdong Aurora Bedroom(Queen-size)",
    image: "https://codingapple1.github.io/vue/room1.jpg",
    content: "침실만 따로 있는 공용 셰어하우스입니다. 최대 2인 가능",
    price: 450000
    },

    ...

    {
    id : 5,
    title: "Banziha One Room",
    image: "https://codingapple1.github.io/vue/room5.jpg",
    content: "반지하 원룸입니다. 비올 때 물가끔 새는거 빼면 좋아요",
    price: 370000
  }];

  export default roomData ;

위 스크립트를 아래 스크립트에 import하였다. 해당 roomData를 import시켰고, div에 해당 import된 값을 적용하였다. for문을 돌려주어 해당 인자값들을 꺼내어 view에 뿌려주었다.

<div v-for="(product,i) in rooms" :key="i">    
    <img class="romm-img" :src="product.image">
    <h4 @click="modal=true" style="cursor:pointer">{{product.title}}</h4>
    <h4>{{product.content}}</h4>
    <h4>가격 : {{product.price}}원</h4>
    <p>신고수 : {{신고수[i]}} </p>
    <button style="cursor:pointer; margin-right : 20px" @click="신고늘리기(i)">허위매물신고</button>
    <button style="cursor:pointer" @click="신고수[i]=0">초기화</button>
</div>

...

<script>
import roomData from './realdata.js';

export default {
  name: 'App',
  data(){
    return{
      rooms : roomData,
...
	}
}
</script>

참고 : https://codingapple.com/unit/vue-data-import-export/?id=139