데이터바인딩

일반 데이터 바인딩

<div> {{ data }} <div>

사용

• 이중 중괄호 문법의 텍스트 보간법 형태로 사용
• 해당 컴포넌트 인스턴스의 값이 변경될 때마다 실시간으로 반영됌

<script>
const price = 1;
</script>

<template>
	<div>
    <p>{{price1}} 만원</p>
  </div>
</template>

v-bind

<div 
	v-bind:속성명="데이터 혹은 함수"
	:속성명="데이터 혹은 함수"
>

<div>

사용

<div id="vue">
    <input v-bind:value="name">
</div>

v-html

<p>텍스트 보간법 사용: {{ rawHtml }}</p>
<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>

텍스트 보간법 사용: <span style="color: red">이것은 빨간색이어야 합니다.</span>
v-html 디렉티브 사용: 이것은 빨간색이어야 합니다.