[Vue.js] 2. 데이터바인딩

데이터바인딩

- JS 데이터를 HTML에 꽂아넣는 문법

 

데이터바인딩하는 이유

1. HTML에 하드코딩해두면 이후에 변경이 어려움
2. Vue의 실시간 자동 렌더링 기능을 사용하기위해(Vue는 data를 변경하면 data와 관련된 HTML에도 실시간 반영됨)

 

<template>
    <div>
        <p>{{ price1 }}원</p>
    </div>
    <div>
        <p>{{ price2 }}원</p>
        <p>{{ products[1] }}원</p>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            price1: 3000,
            price2: 6000,
            products: ['A', 'B', 'C'],
        };
    },
};
</script>

 

*HTML 속성도 데이터바인딩 가능 (ex) id, class, style 등등)

<template>
    <h4 :style="titleStyle">A 원룸</h4>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            titleStyle: 'color : blue',
        };
    },
    components: {},
};
</script>