[Vue.js] 단방향 데이터 바인딩

Vue.js의 데이터바인딩이란?

웹 애플리케이션에서 UI와 데이터를 동기화하는 기능을 제공하는 Javascript 프레임워크이다.

Vue.js의 데이터바인딩을 활용하면 데이터의 변화에 따라 화면의 내용이 자동으로 업데이트되어 사용자에게 동적인 웹 애플리케이션을 제공할 수 있게한다.

 

예를 들자면 쇼핑몰에 올라가는 상품의 가격 처럼 가변적인 데이터들에 사용 할 수 있겠다.

 

이를 위해서 Vue의 실시간 자동 렌더링 기능을 사용하기위해서 데이터바인딩을 사용한다.

 

선언적 렌더링 data() & 데이터바인딩 문법

위의 렌더링 기능을 사용하기 위해 아래와 같이 작성한다.

<template>
    <p>
        <!-- 데이터 바인딩 -->
        {{ price1 }}
    </p>
</template>

<script>
export default {
    name : 'App',
	/* 데이터 보관함 data() */
    data() {
        return {
        	price1: 60
        }
    },
}

</script>

 

속성 바인딩 

단순 텍스트 뿐 아니라 HTML의 속성(property)도 데이터 바인딩이 가능하다.

v-bind:속성명="data()로 선언된 속성값" 으로 사용해도 되고

v-bind를 빼고 콜론(:)으로 축약해서 사용해도 된다. 

 

<template>
    <!-- 첫번째 문법: 'v-bind' -->
    <h2 v-bind:style="colorStyle">XX원룸</h2>
    <input type="text" v-bind:value="MyValue" />
    <!-- 두번째 문법: ':(콜론)' -->
    <h2 :style="colorStyle">XX원룸</h2>
    <input type="text" :value="MyValue" />
</template>

<script>
export default {
    name : 'App',
    data() {
        return {
            price: 60,
            colorStyle: 'color:red',
            MyValue: "test"
        }
},
}

</script>