[Vue/코딩애플/part1] 1. HTML에 자바스크립트 데이터 넣기 (Vue 데이터 바인딩 문법)

app.vue 파일 초기 셋팅에서 필요 없는 부분일 일단 지우자

 

template 영역에 빨간 줄이 그어지는데, 안에 내용이 없으면 오류로 인식한다. 아무 내용 채우면 된다

 

1. template : html 내용 담는 곳
2. script : 자바스크립트 기능 담는 곳
3. style : 스타일 지정 

 

Vue의 데이터바인딩 문법

1. <script></script> 영역에

data() {
    return {
      
    }
  }

 

를 추가하자.

 

데이터를 Object 형식으로 추가하면 된다.

해당 영역을 Vue의 data 보관함, 변수 보관함이라고 생각하면 된다.

 

 

저 XX 영역에 변수를 넣고 싶다면?

 

return 안에 오브젝트 형식으로 원하는 변수를 넣은 후,

<template></template> 안에 {{변수이름}} 이렇게 입력하면 된다.

<template>
  <div>
    <h4>XX 원룸</h4>
    <p>{{price1}} 만원</p>
  </div>
  <div>
    <h4>XX 원룸</h4>
    <p>{{price2}} 만원</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      price1 : 100,
      price2 : 200
    }
  },
  components: {
  }
}
</script>

 

HTML 속성 바인딩 하기

 

style 속성 값에도 데이터 바인딩을 하고 싶다면

:style="{데이터이름}"

 

데이터는 데이터 보관함에 똑같은 방식으로 저장하면 된다.

<template>
  <div>
    <h4 :style="styleColor">XX 원룸</h4>
    <p>{{price1}} 만원</p>
  </div>
  <div>
    <h4>XX 원룸</h4>
    <p>{{price2}} 만원</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      price1 : 100,
      price2 : 200,
      styleColor : 'color:red'
    }
  },
  components: {
  }
}

 

⚡속성앞에 : 를 꼭 붙이는 걸 잊지 말자. 가끔 까먹는다.

 

 

Array 형식의 데이터를 바인딩하려면?

<template>
  <div>
    <h4>{{products[0]}}</h4>
    <p>10만원</p>
  </div>
  <div>
    <h4>{{products[1]}}</h4>
    <p>20만원</p>
  </div>
  <div>
    <h4>{{products[2]}}</h4>
    <p>30만원</p>
  </div>

</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      products : ['역삼동원룸', '천호동원룸', '마포구원룸']
    }
  },
  components: {
  }
}
</script>

 

근데 뭔가.. for 문을 돌리고 싶다.

for 문은 다음 글에서 정리하도록 하자.