VUE 공부 3일차

VUE 이벤트 핸들러

VUE에서 이벤트를 발생시키고 조작하기 위한 함수

• v-on 디렉티브를 단축문법으로 @ 기호를 사용하며, DOM 이벤트를 수신하고, 트리거될 때, 사전에 정의해둔 JavaScript 코드 실행 
  • ex) v-on:click="handler"   or  @click = "handler"

어디에서 사용하는가 : 이벤트를 발생하고 싶은 싶은 부분에서 사용

왜 사용하는가 : 사용자의 동작을 통해 어떤 이벤트가 발생했을 때 그로 인해 어떤 일이 발생될 것인지를 정의

어떻게 사용하는가 : 

예시 이용

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    부동산
    <h4 :style="styleArray[0]">{{ product[0] }}</h4>
    <p>{{ price[0] }} 만원</p>
    <button v-on:click="report[0]++">클릭 시 허위매물신고</button>
    <span>신고 수 : {{ report[0] }}</span>
  </div>
  <div>
    <h4 :style="styleArray[1]">{{ product[1] }}</h4>
    <p>{{ price[1] }} 만원</p>
    <button v-on:click="increaseMethod">함수 이용 시 허위매물신고</button>
    <span>신고 수 : {{ report[1] }}</span>
  </div>
  <div>
    <h4 :style="styleArray[2]">{{ product[2] }}</h4>
    <p>{{ price[2] }} 만원</p>
    <button @mouseover="report[2]++">마우스오버 시 허위매물신고</button>
    <span>신고 수 : {{ report[2] }}</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      report: [0, 0, 0],
      product: ["1번 원룸", "2번 원룸", "3번 원룸"],
      price: ["60", "70", "80"],
      styleArray: ["color : red", "color : blue", "color : green"],
    };
  },
  methods: {
    increaseMethod() {
      this.report[1]++;
    },
  }, // 함수 선언 및 이용
  components: {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

위 처럼 3가지 경우에 대해서 사용하게 되면,  아래와 같은 페이지가 나타나며, 각각 기능을 다른 방법으로 이용할 수 있음

각기 다른 방법을 적용하여 신고 수를 나타냄

위처럼 기능에 대하여 방법을 적용하여 나타내 보았음.

 

Vue에서 그럼 동적인 UI를 만드는 방법은?

0. HTML CSS로 디자인을 해두기

1. UI 현재 상태를 데이터로 저장해둠

• 모달창이 현재 어떻게 보여 하는가?

2. 데이터에 따라 UI가 어떻게 보일지 작성

 

그럼 UI를 조건적으로 보이게 안 보이게 하기 위해서는?

v-if를 사용해서 나타낸다.

<template>
  <div class="black-bg" v-if="onOff == true">
    <!-- v-if는 참일 때만 보여줌-->
    <div class="white-bg">
      <h4>상세 페이지임</h4>
      <p>상세 페이지 내용임</p>
      <br />
      <button @click="onOff = false">닫기</button>
    </div>
  </div>

  <div>
    <div class="menu">
      <a v-for="Page in menus" :key="Page">{{ Page }}</a>
    </div>
    <img src="./assets/room0.jpg" class="room-img" />
    <h4 @click="onOff = true" :style="styleArray[0]">{{ product[0] }}</h4>
    <p>{{ price[0] }} 만원</p>
    <button v-on:click="report[0]++">클릭 시 허위매물신고</button>
    <span>신고 수 : {{ report[0] }}</span>
  </div>
  <br />
  <hr />
  <div>
    <img src="./assets/room1.jpg" class="room-img" />
    <h4 @click="onOff = true" :style="styleArray[1]">{{ product[1] }}</h4>
    <p>{{ price[1] }} 만원</p>
    <button v-on:click="increaseMethod">함수 이용 시 허위매물신고</button>
    <span>신고 수 : {{ report[1] }}</span>
  </div>
  <br />
  <hr />
  <div>
    <img src="./assets/room2.jpg" class="room-img" />
    <h4 @click="onOff = true" :style="styleArray[2]">{{ product[2] }}</h4>
    <p>{{ price[2] }} 만원</p>
    <button @mouseover="report[2]++">마우스오버 시 허위매물신고</button>
    <span>신고 수 : {{ report[2] }}</span>
  </div>
  <br />
  <hr />
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      onOff: false,
      menus: ["Home", "Shop", "About"], // 메뉴 항목
      report: [0, 0, 0],
      product: ["1번 원룸", "2번 원룸", "3번 원룸"],
      price: ["60", "70", "80"],
      styleArray: ["color : red", "color : blue", "color : green"],
    };
  },
  methods: {
    increaseMethod() {
      this.report[1]++;
    },
  }, // 함수 선언 및 이용
  components: {},
};
</script>

<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 {
  width: 100%;
  background: white;
  border-radius: 8%;
  padding: 20px;
}
.room-img {
  width: 100%;
  margin-top: 40px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}
.menu a {
  color: white;
  padding: 10px;
}
</style>

위와 같이 코드를 작성할 경우 v-if를 통해 모달창을 보이는 것과 안 보이는 것 두가지 경우를 나타낼 수 있음

위와 같은 이미지에서 원룸을 눌렀을 때

아래와 같이 변하며 상세페이지 화면을 나타낼 수 있음.

즉 React와 달리 Vue에서는 조건을 v-if만을 사용해 나타낼 수 있으며, 조건을 주어 특정 행위를 나타내고 싶을 때 사용할 수 있음.