[Vue.js] - Vue 문자열 및 html 코드를 데이터 바인딩 하는 방법

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

Vue.js 데이터 바인딩은 Vue.js 프레임워크에서 제공하는 기능 중 하나로, 데이터와 화면 요소를 동기화하는 방법입니다. 데이터 바인딩을 통해 데이터의 변경이 화면에 자동으로 반영되며, 화면 요소의 상태 변화가 데이터에 반영됩니다.

Vue.js에서는 다음과 같은 데이터 바인딩 방식을 제공합니다:

1. 콧수염 괄호(Mustache Syntax) ``: 이중 중괄호를 사용하여 데이터를 화면에 출력합니다. 데이터의 변경이 있을 때마다 화면이 자동으로 업데이트됩니다.

2. `v-bind` 디렉티브: `v-bind`를 사용하여 HTML 속성에 데이터를 바인딩합니다. 예를 들어, `:src="imageUrl"`과 같이 사용하여 이미지의 소스 경로를 데이터에 바인딩할 수 있습니다.

3. `v-model` 디렉티브: 양방향 데이터 바인딩을 구현하는 데 사용됩니다. `v-model`을 사용하면 입력 요소(예: input, select, textarea)와 데이터가 양방향으로 동기화됩니다.

 

4. `v-html` 디렉티브: Vue 3의 `v-html` 디렉티브는 HTML 코드를 동적으로 렌더링하기 위해 사용됩니다. 일반적으로 Vue.js는 사용자 입력, 서버에서 가져온 데이터 등의 텍스트를 HTML로 해석하지 않고 일반 텍스트로 취급합니다. 그러나 `v-html` 디렉티브를 사용하면 Vue.js는 해당 속성을 HTML로 해석하고 렌더링 합니다.

데이터 바인딩을 사용하면 Vue.js 애플리케이션에서 데이터와 화면이 밀접하게 연결되어 상호작용이 원활하게 이루어집니다. 데이터의 변경에 따라 화면이 업데이트되므로 개발자는 직접 DOM 조작을 신경 쓰지 않고 데이터에 집중할 수 있습니다.

 

#Vue 문자열 데이터 바인딩 하는 방법

-문자열의 경우 이중 중괄호를 이용해서 데이터를 바인딩할 수 있습니다.

 

-Vue.js 코드

<template>
    <h1>테스트, {{title}}!</h1>
</template>

<script>
    export default {
        data() {
            return {
                title: '문자열 바인딩'
            };
        }
    }
</script>

 

-문자열 데이터 바인딩 테스트

 

 

#Vue Html 코드를 데이터 바인딩 하는 방법

-Html 태그를 바인딩할 때는 문자열과 같이 이중 중괄호를 사용하면 안 되고 v-html 디렉티브를 사용해야 합니다.

 

-Vue.js 코드

<template>
    <div>{{ htmlVinding }}</div>
    <div v-html="htmlVinding"></div>
</template>

<script>
    export default {
        data() {
            return {
                htmlVinding: '<p style="color:blue;">문자열 및 Html 데이터 바인딩 테스트</p>'
            };
        }
    }
</script>

 

-Html 태그 데이터 바인딩 테스트

첫 번째 줄처럼 이중 중괄호를 사용하면 Html태그일지라도 문자열로 인식되어서 출력이 됩니다.

두 번째 줄은 vue의 v-html 디렉티브를 사용해서 정상적으로 Html 태그가 적용되어서 출력된 것을 확인하실 수 있습니다.