Vue v:on eventlistener

기록하는 습관을 가지는것.

단기기억장치에서 장기기억장치로의 진화..

sdd hdd 기능이 있는 사람이되자 ..

 

ide가 좋아져서 손코딩 할 기회가 줄어듬 분명 장점이긴한데

이게 뭔가 비기너 한테는 단점인듯

손코딩 안하면 문법이 안외워짐 계속 검색해서 써야하니깐 귀찮음

 

<template>

<div class="menu">

<a v-for = "(item, i) in menus" :key="i" > {{item}} </a>

</div>



  
  
  <div>
    <p>{{ products[0] }}</p>
    <p>60만원</p>
    <button v-on:click="count[0]++">허위매물신고</button> <p>신고수 : {{count[0]}}</p>
    
  </div>

  <div>
    <p>{{ products[1] }}</p>
    <p>60만원</p>
    <button @click="count[1]++">허위매물신고</button> <p>신고수 : {{count[1]}}</p>
  </div>

  <div>
    <p>{{ products[2] }}</p>
    <p>60만원</p>
    <button v-on:click="count[2]++">허위매물신고</button> <p>신고수 : {{count[2]}}</p>
  </div>


</template>



<script>
export default {
  name: "App",

  data() {
    return {
      count : [0,0,0],
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
      menus: ["HOME", "Products", "Help"]
    };
  },
  methods: {
    increse(){
      this.count ++;
    }
  },

  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;
}

.menu{
  background-color: cadetblue;
  padding: 15px;
  border-radius:  5px;
}

.menu a{
  padding: 10px;
  color: aliceblue; 
}
</style>

 

두둥 methods 의 등장 길고긴 문법을 정리해서 한단어로 쓸수있다는게 methods의 특징 ! 

이번장에서는 v:on:click // @click 둘중 하나를 사용해서 click eventlistener를 만들고 버튼을 누를때마다 자연수가 카운팅 되도록 구현

 

                   <button v:on:click = "increse()" >허위매물신고버튼</button> <span>신고수 : {{count}}</span>