(2) Vue로 만드는 직방/인스타그램 웹앱 강의

https://youtu.be/0BbF7UxKKvg

---

App.vue

Hello World를 다 지우고 시작합시다!

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
</template>

<script>
export default {
  name: "App",
  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;
}
</style>

 

{{ 데이터바인딩 }}

> 자바스크립트 데이터를 html에 넣는 문법.

<script>
//document.getElementById().innerHTML = ??  기존의 자바스크립트 문법

export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      price1: 60,
    };
  },
  components: {},
};
</script>

이렇게 data( ){ } 안에 데이터를 넣어준다.

그리고 위의 <template>에서 데이터를 가져오고 싶다면, {{ }} 로 가져온다.

{{ price1 }}

 

짜잔~~

 

이 문법을 왜, 언제 사용하는지?

{{데이터바인딩}하는 EU

> 1. HTML에 하드코딩해놓으면 나중에 변경이 어려움.

> 2. Vue의 실시간 자동 렌더링 기능을 이용할 수 있음. (Vue는 data를 변경하면 data와 관련된 HTML에도 실시간으로 반영됨.)

 

자주 변할 것 같은 데이터들은 데이터로 보관하고 HTML로 {{꽂아넣는다}}.

 

Q. 쇼핑몰 이름도 데이터바인딩할까?

->애초에 바뀔 일이 없으면 안해도 될 듯 (굳이?)

 

HTML 속성도 데이터바인딩 가능

:속성="데이터이름"

<h4 class="red" :style="스타일">XX원룸</h4>

 

숙제: 이 사진처럼 만들어오기

데이터 값에 아래 코드 추가함.

products: ["역삼동원룸", "천호동원룸", "마포구원룸"],

 

> 숙제 끝!

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    <h4>{{ products[0] }}</h4>
    <p>50 만원</p>
  </div>
  <div>
    <h4>{{ products[1] }}</h4>
    <p>가격은 아무거나</p>
  </div>
  <div>
    <h4>{{ products[2] }}</h4>
    <p>가격은 아무거나</p>
  </div>
</template>

<script>
//document.getElementById().innerHTML = ??  기존의 자바스크립트 문법

export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      price1: 60,
      price2: 70,
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  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;
}
</style>