[Vue.js] Vue 데이터 바인딩, 반복문

데이터바인딩

js와 Vue의 데이터바인딩 문법

1. javascript의 경우

document.getElementById().innerHTML = 데이터;

자바 스크립트는 위와 같이 넣을 데이터를 우변에 넣고 태그를 가져와서 좌변에 쓴다.

2. vue의 경우

<script>
export default {
  name : 'App',
  data(){
    return {
      price1 : 60
    }
  }
}
</script>

vue는 데이터를 script안에 data안에 넣어준다. 그리고 html부분에 {{}}을 써서 데이터를 가져와서 사용한다.

데이터 바인딩을 하는 이유

1. 정적 데이터가 아닌 이상 데이터는 계속적으로 변경된다. 그래서 데이터를 따로 저장해놓을 경우 수정이 편리해진다. js로 조작이 편리하다.
2. Vue의 실시간 렌더링기능 쓰려면 데이터바인딩이 필요하다. Vue는 data가 변경되면 data와 관련된 HTML에 실시간으로 반영된다.

html속성에 데이터바인딩

style="" id="" class="" 등에도 data를 넣을 수 있다. 이 경우는 보통의 경우랑 다른 것은 스타일의 경우에는 앞에 :기호를 넣어주어야 한다.

<template>
  <div>
    <h4 :style="스타일">XX 원룸</h4>
    <p>{{price1}} 만원</p>
  </div>
</template>

<script>
export default {
  name : 'App',
  data(){
    return {
      price1 : 60,
      스타일 : 'color:red'
    }
  }
}
</script>

반응형

반복문

리액트의 for, map, forEach대신에 vue는 v-for를 사용한다. v-for를 쓰면 원하는 만큼 HTML 태그를 복붙할 수 있다.

<div class="menu">
  <a v-for="작명 in 3" :key="작명">Home</a>
</div>

1. 우선 반복문을 실행할 태그에 v-for를 써준다.
2. v-for="데이터 in 반복할횟수"를 작성해준다. ****
3. 여기서 key는 리액트와 같이 랜더링하기 위해서 작성하는 것이다. 그래서 변화를 감지하여 어떤게 변화되었는지 알 수 있다. 그리고 :key필수로 들어가야 한다. 그렇지 않으면 오류가 발생한다.

배열에서 데이터 꺼내기

data(){
  return {
    메뉴들 : ['Home', 'Shop', 'About']
  }
}

script에서 배열을 작성하면, 이를 반복문으로 돌릴 수 있다.

<div class="menu">
  <a v-for="작명 in 메뉴들" :key="작명">Home</a>
</div>

반복시킬 횟수 적는 란에다가 array 자료를 집어넣는다.

1. 메뉴들안의 자료 갯수만큼 반복된다.

2. 작명한 변수는 반복될 때마다 메뉴들 안에 있던 자료들이 된다.

변수 여러개 사용하기

<div class="menu">
  <a v-for="(작명,i) in 메뉴들" :key="i"> {{ 작명 }}</a>
</div>

저렇게 ()안에 변수를 두 개이상 사용가능하다. i는 인덱스로 key값으로도 사용가능하다.