[Vue3 Opt] 부동산 홈페이지 생성 1 - 데이터 바인딩

• 값 데이터 바인딩
• 속성 데이터 바인딩
• 정리

 

부동산 허위매물 쇼핑몰 사이트 클론 코딩입니다.^-^v

(코딩애플님의 vue 2강)

 

 App.vue 에 코딩을 할 건데 지금은 데이터 바인딩을 연습해봅시다.~

= js 데이터를 html에 넣어서 사용할 수 있다.!!

 

 

- 값 이용

<script>
document.getElementById().innerHTML = ??

 

원래 이런 식으로 코딩했었지요.?

 

이걸 이렇게 길게 코딩하지 않아도 된다. 다만 어딘가에 변수처럼 저장을 해두긴 해야한다.

이렇게 <script> 안에 "데이터 보관함"을 만들어서 모든 변수를 넣으면 된다.

** 이때, object 자료 형식으로 써야 한다. (자료 이름 : 자료 값)**

 

 

● html 에 표시할 때는 {{}} 중괄호 두 개 사용한다.

 

 

- 속성 이용

● id, class, 속성도 바인딩할 수 있다. 다만 {{}}가 아닌 : 콜론 사용

 

<div>
   <h3 class="red" style="color:cornflowerblue">징궁 원룸</h3>
   <p>{{price2}}만원</p>
</div>

↓

<div>
    <h3 class="red" :style="스타일">징궁 원룸</h3>
    <p>{{price2}}만원</p>
</div>

 

콜론을 꼭 써야 한다 !!!!!!!!!!!!!!!!!

 

또한 배열도 이용할 수 있다.

products :['역삼동', '천호동', '봉천동']

<script>의 영역에 위와 같이 지정 후 html에 아래 같이 적용

<h3>{{products[0]}}</h3>

 

● array 자료형

var array1 = [10,20,30];

어레이[1]; 처럼 사용할 수 있다.

 

위 예제에서는 products 가 array 자료형인 것

---

데이터 바인딩 {{데이터 변수 이름}} :속성="데이터이름"

 

 

◎ 데이터 바인딩 하는 이유

 

하드코딩(html 에 바로 쓰는) 할 경우 유지보수가 어렵다.

가변적인 값들은 아래 데이터로 저장해두고 html에 넣는 게 좋다.

**중요한 이유** vue가 실시간 자동 렌더링하는데, 이걸 쓰려면 써야합니다.^^

자동 렌더링 기능 : 뷰는 아래 데이터를 변경할 경우 html에도 실시간으로 반영한다. (= 실시간 자동 재 렌더링)

 

응용

웹앱 만들 수 있다. = 가격필터를 조절하면 오른쪽 검색 데이터가 다르게 출력되거나 ~

쇼핑몰 이름 같은 건 굳이 데이터 바인딩 해봤자야. 바뀌지 않는 값이니까요~

 

 

---

<template>
  <img alt="Vue logo" src="./assets/logo.png">
    <div>
        <h3>{{products[0]}}</h3>
        <p>{{price1}}만원</p>
    </div>
    <div>
        <h3 class="red" :style="스타일">{{products[1]}}</h3>
        <p>{{price2}}만원</p>
    </div>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>

export default {
  name: 'App',
    data(){
      return{
          price1:60,
          price2:70,
          스타일: 'color : blue',
          products :['역삼동', '천호동', '봉천동']
      }
    },
  components: {
  }
}
</script>