Vue - 데이터바인딩 문법

Vue의 기본 구조는 template / script / style로 구성된다.

template

• HTML코드로 구성된다.
• {{변수명}}으로 script에서 지정한 변수를 사용할 수 있다.(react의 state 개념)

<template>
  <div>
    <h4 :style="스타일 명 변경">{{ name1 }} 원룸</h4>
    <p>{{ price1 }} 만원</p>
  </div>
  <div>
    <h4>{{ name2 }} 원룸</h4>
    <p>{{ price2 }} 만원</p>
  </div>
</template>

script

• data()객체 안의 변수는 react의 state와 같은 개념이라 생각하면된다.

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  data(){
    return{
        price1 : 500,
        price2 : 600,
        name1 : "양천구",
        name2 : "강서구",
        스타일명 변경 : "color : red"
    }
  },
  components: {
  }
});