🧵 Vue.js 스터디 1.

데이터 바인딩

JS데이터를 HTML에 꽂아넣는 문법

<div>
  //밑에 있는 데이터 HTML에 꽂아넣고 싶으면 {{데이터이름}}
  <p>{{price1}}만원</p>
 <h4>{{products[0]}}</h4>
 </div>
<script>
export default{
  name:'APP',
  //데이터 보관함부터 있어야 함
  data(){
    return {
      //여기에 데이터를 보관하면 된다.
      //데이터는 object자료로 저장하기
      price1:30,
      products:[ '역삼동원룸','천호동원룸','마포구원룸']
      
    }
  },
  componenets:{
  }
</script>

{{데이터 바인딩}}하는 이유??
1. HTML에 하드코딩해놓으면 나중에 변경이 어려움
2.Vue의 실시간 자동 렌더링이 된다.
=>Vue는 data를 변경하면 data와 관련된 HTML에도 실시간으로 반영이 된다.
3. 애초에 값이 바뀔 일 없으면 데이터 바인딩안해도 된다.

HTML태그 안의 속성 데이터 바인딩은 :어쩌구
<img :src='원룸들[0].image' class="room-img">
HTML태그 안의 내용 데이터 바인딩은 {{어쩌구}}
<p>{{원룸들[0].price}}원</p>

v-for반복문

<div class='menu">
 <a> Home</a>
 <a>Products</a>
 <a>About</a>
 <a>About</a>
 <a>About</a>
//반복적인 HTML태그 출몰
아래와 같이 작성. 반복문 쓸 때 :key안쓰면 에러난다
<a v-for="(a,i) in 메뉴들" :key="i">Home</a>
</div>
  <div v-for="(a,i) in products" :key='i'>
    <h4>{{products[i]}}</h4>
   </div>
  <script>
export default{
  name:'APP',
  //데이터 보관함부터 있어야 함
  data(){
    return {
      //여기에 데이터를 보관하면 된다.
      //데이터는 object자료로 저장하기
       메뉴들:['Home','Shop','About'],
      products:[ '역삼동원룸','천호동원룸','마포구원룸']
      
    }
  },
  componenets:{
  }
</script>

이벤트 핸들러

HTML클릭 시 코드 실행하는 법

<div>
  //v-on:click === @click
  //변수에 1더해주세요..
  <button v-on:click="increase">허위매물신고</button> <span>신고수:{{신고수}}</span>
  </div>

  <script>
export default{
  name:'APP',
  data(){
    return {
       신고수:0,
       메뉴들:['Home','Shop','About'],
      products:[ '역삼동원룸','천호동원룸','마포구원룸']
      
    }
  },
    // click안에 들어갈 코드가 길면 function으로 축약해 넣으면 됨
  //vue에서 함수 만들고 싶으면 methods:{함수(){}}안에 만들어라
 
  methods:{
    increase(){
      this.신고수 +=1;
    }
  },
  componenets:{
  }
</script>

중요 : vue에서 함수만들 때 주의사항 => 함수 안에서 데이터쓸 땐this.데이터명

참고:Youtube 코딩애플