[vuejs] mounted (feat. lifecycle hook)

1. 아직 이해는 못했지만 나중에 하나씩 해보기(html파일의 인생인가 보다)

2. mouted는 html 창이 보이면 시작하는 듯하다. 

3. App.vue / Discount.vue

<template>

<transition name="fade">
  <Modal :누른상품번호="누른상품번호" :products="products"
   :모달창열림="모달창열림" @모달창닫기="모달창닫기()"/>
  </transition>

  <Discount v-if="할인창사라졋 == true" :할인률="할인률"/>

  <div class="정렬버튼">
  <button @click="가격높은순">가격높은순</button>
  <button @click="가격낮은순">가격낮은순</button>
  <button @click="되돌리기">되돌리기</button>
</div>
  
  <Card v-for="(a,i) in products" :key="a" :products="products[i]"
    @모달창열기="모달창열기(); 누른상품번호=$event" 
    @increase="increase(i)"  />
  

</template>

<script>

import data from './assets/oneroom.js'
import Discount from './components/Discount.vue'
import Modal from './components/Modal.vue'
import Card from './components/Card.vue'

export default {
  name: "App",
  data() {
    return {
      할인창사라졋 : true,
      할인률: 30,
      누른상품번호 : 0,
      모달창열림: false,
      모달창닫힘: true,
      products : data,
      products2 : [...data],
    };
  },
  mounted(){
    let saletimer = setInterval(()=>{
      this.할인률 = this.할인률 - 10;
      if (this.할인률 == 0){
      clearInterval(saletimer);
      setTimeout(()=>{
        this.할인창사라졋 = false;
      }, 1000)
    } else {
      return
    }
    }, 1000)

  },
  components: {
    Discount,
    Modal,
    Card,

  },
  methods: {
    되돌리기(){
      this.products = [...this.products2]
    },  
    가격낮은순(){
      this.products.sort(function(a,b){
        return a.price - b.price
      })
    },
    가격높은순(){
      this.products.sort(function(a,b){
        return b.price - a.price
      })
    },
  
    increase(e) {
      this.products[e].fakeReport++;
    },
    모달창열기() {
      this.모달창열림 = true;
      this.모달창닫힘 = false;
    },
    모달창닫기() {
      this.모달창열림 = false;
      this.모달창닫힘 = true;
    }
  },
};
</script>

<style>
.정렬버튼 {
  padding: 20px;
  background-color: #eee;
}
.fade-enter-from, .fade-leave-to {
  transform: scale(0);
}

.fade-enter-active, .fade-leave-active{
  transition: all 0.5s;
}

.fade-enter-to, .fade-leave-from{
  transform: scale(1);
}

.discount {
  background: #eee;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
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: auto;
  background: white;
  border-radius: 8px;
  padding: 20px;
}
.room-img {
  width: 500px;
  height: 250px;
  border-radius: 25px;
  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;
}
</style>

 

<template>
    <div class="discount">
    <h4>지금 결제하면 {{ 할인률 }}% 할인</h4>
  </div>
</template>

<script>
export default {
    name : 'app-discount',
    props : {
      할인률 : Number,
    }

}
</script>

<style>

</style>

4. mouted 부분

mounted(){
    let saletimer = setInterval(()=>{
      this.할인률 = this.할인률 - 10;
      if (this.할인률 == 0){
      clearInterval(saletimer);
      setTimeout(()=>{
        this.할인창사라졋 = false;
      }, 1000)
    } else {
      return
    }
    }, 1000)

  },

5. 출력창