[Vue] Vue의 기초(3) - 이벤트 핸들러, 조건문

 이벤트 핸들러

 

자바스크립트 전통방식은 onclick=""이지만 Vue에서는 v-on:click=""를 사용한다. 또는 @click=""를 쓴다.

(@mouseover (마우스를 가져다 댈 때), @input 등등)

 

<template>
  <div>
    <h4>아이폰12 중고</h4>
    <p>80만원</p>
    <button @click="count++">허위매물신고</button> <span>신고수 : {{count}}</span>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      count : 0,
    }
  },
  components: {
    
  }
}
</script>

또는 함수로 만들어서 넣어줄 수 있는데, 함수는 <script>의 methods : { 함수명(){ } }에 만든다.

그리고 함수를 넣을 때에는 "increase()"가 아닌 "increase" 식으로 ()을 넣지 않는다.

Vue에서 함수만들 때 주의사항으로 함수안에서 데이터를 쓸 땐 this.데이터명

<template>
  <div>
    <h4>아이폰11프로 중고</h4>
    <p>80만원</p>
    <button @click="increase">허위매물신고</button> <span>신고수 : {{count}}</span>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      count : 0,
    }
  },

  methods : {
    increase(){
      this.count+=1;
    }
  },

  components: {
    
  }
}
</script>

그리고 동적인 UI를 만들 때 UI 상태를 저장해둘 데이터를 먼저 만들고 데이터에 따라 HTML 어떻게 보일지 @click 등으로 UI 조작하는 버튼을 만들면 된다.

<template>
  <div class="black-bg" v-if="modal == true">
    <div class="white-bg">
      <h4>{{oneroom[clicked].title}}</h4> // 3) 동적으로 UI가 작용
      <p>{{oneroom[clicked].content}}</p>
      <button @click="modal = false">닫기</button>
    </div>
  </div>

  <div class="menu">
    <a v-for="a in menus" :key="a">{{a}}</a>
  </div>

  <div v-for="(a,i) in oneroom" :key="i">
    <img :src="a.image" class="room-img">
    <h4 @click="modal=true; clicked=i">{{a.title}}</h4>
    // 2) 클릭했을 때 clicked에 해당하는 값 i 넣기
    <p>{{a.price}}</p>
  </div>
</template>

<script>
import data from './assets/oneroom';

export default {
  name: 'App',
  data(){
    return {
      oneroom : data,
      clicked : 0, // 1) UI 상태 저장 기본값 0
      modal : false,
      menus : ['Home', 'Shop', 'About'],
      products : []
    }
  },
}
</script>

 

 

 조건문 (Modal창)

 

v-if="조건식"

동적인 UI 만드는 법은 먼저 UI의 현재 상태를 데이터로 저장해둔다. (false)

그리고 데이터에 따라 UI가 어떻게 보일지 작성한다.(true)

 

 

<template>
  <div class="black-bg" v-if="modal==true">
    <div class="white-bg">
      <h4>Modal Title</h4>
      <p>내용</p>
      <button @click="modal=false">X</button>
    </div>
  </div>
  <div class="menu">
    <a v-for="i in menus" :key="i">{{i}}</a>
  </div>
  <div>
    <img src="./assets/p0.png" class="phone-img">
    <h4 @click="modal=true">{{products[0]}}</h4>
    <p>{{price[0]}}만원</p>
    <button @click="count[0]++">허위매물신고</button> <span>신고수 : {{count[0]}}</span>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){ // React에서는 state라고 부른다.
    return {
      modal : false,
      count : [0, 0, 0],
      menus : ['Home', 'About', 'Login'],
      products : ['아이폰12프로', '아이폰12', '아이폰12미니'],
      price : ['130', '110', '90'],
    }
  },
  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: 8px;
  padding: 20px;
}
.phone-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;
}
.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}
.menu a {
  color: white;
  padding: 10px;
}
</style>

 

v-else, v-else-if

v-else는 v-if가 참이 아닐때, v-else-if는 if문 연달아 여러개 쓰고싶을 경우 사용한다.

<div v-if="1==2">
  안녕하세요
</div>
<div v-else-if="1==3">
  안녕하세요2
</div>
<div v-else>
  안녕하세요3
</div>

 

v-if와 v-show

 

둘다 화면에 보이고 안보이고를 처리하지만 v-if는 조건이 맞지 않으면 화면에 렌더링 자체를 하지 않는 반면에 v-show는 조건을 떠나 무조건 렌더링을 한다. 화면에서 자주 보이고 안보이고를 반복하려면 v-show를 사용하는 것이 리소스 낭비에 도움이 되고, v-if는 특정 조건에만 보여야할 때 사용하는 것이 (action이 할 지 안할 지 모를 때) 렌더링을 안하기 때문에 유리하다.

 

v-model은 양방향 바인딩이 가능하게 한다.

양방향 바인딩: 화면에서 입력받아 데이터로 다시 전달하는 과정이 추가되어 양쪽 방향 모두 바인딩 되는 것.

 

<template>
  <div>
    <select class="form-control" v-model="region" @change="changeRegion">
      <option :key="i" :value="d.v" v-for="(d,i) in options">{{d.t}}</option>
    </select>
    <table class="table table-bordered" v-show="tableShow">
      <tr :key="i" v-for="(d,i) in options">
        <td>{{d.v}}</td>
        <td>{{d.t}}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [
        { v: "S", t: "Seoul" },
        { v: "J", t: "Jeju" },
        { v: "B", t: "Busan" },
      ],
      region: "B",
      tableShow: false,
    };
  },
  watch: {
    input1() {
      console.log(this.input1);
    },
    title() {},
  },
  methods: {
    changeRegion() {
      alert(this.region);
    },
  },
};
</script>