VueJS 2. 템플릿 문법 - 보간법(Interpolation)으로 데이터 바인딩하기

보간법(Interpolation)

Vue.js는 Vue 인스턴스의 데이터를 DOM에 바인딩할 수 있는 html 기반 템플릿 문법을 제공한다. 이 데이터 바인딩을 위한 템플릿 문법 안에 텍스트보간(Mustache) / HTML보간(v-html) / Attribute보간(v-bind) 등이 있으며, 이들 보간법 중 몇가지에 디렉티브(v-)가 사용되는 것이다.

기본 문자열 - Mustache (이중 중괄호)

Mustache(머스타쉬-수염) 구문을 사용하여 데이터를 바인딩하는 기본적인 텍스트 보간이다.

<div id="app">
        <ul>
            <li>문자열 : {{name}} 입니다.</li>
            <li>나이 : {{age}}세</li>
            <li>남자 : {{isMan}} 입니다.</li>
        </ul>
</div>

<script>
        new Vue({
            el : '#app',
            data : {
                name : '홍길동',
                age : 20,
                isMan : true
            }
        });
</script>

텍스트보간 'v-text'

---

디렉티브는 V- 접두사가 있는 속성을 말하며, 인스턴스 값의 변경에 따라 반응적으로 DOM에 적용한다. 아래는 <span> 안에v-text="속성명" 을 사용하여 인스턴스의 값을 가져온 예시이다.

<div id="app">
        <ul>
            <li>문자열 : <span v-text="name"></span></li>
            <li>숫자 : <span v-text="age"></span></li>
            <li>Boolean : <span v-text="isMan"></span></li>
        </ul>
</div>

<script>
        new Vue({
            el : '#app',
            data : {
                name : '홍길동',
                age : 20,
                isMan : true
            }
        });
</script>

HTML보간 'v-html'

텍스트 구문 안에 태그를 그대로 적어도 v-html 을 사용하면 실제 태그가 생성되어 태그 안의 내용만 출력된다.

<div id="app">
        <p v-text="slogan"></p>
        <p v-html="tag"></p>       //'태그를 넣어서 출력할 수 있어요' 만 출력
</div>

<script>
        new Vue ({
            el: '#app',
            data : {
                slogan: '긍정적인 경험',
                tag: '<h2>태그를 넣어서 출력할 수 있어요</h2>',
            }
        });
</script>

Attribute보간 'v-bind'

v-bind: 를 사용하여 앵커태그의 href 링크를 지정하는 예시이다. 아래와 같이 v-bind: 는 그냥 :로 약식표기가 가능하다.

<div id="app">
        <p><a v-bind:href="url" target="_blank">도우너</a></p>
        <p><a :href="url" target="_blank">도우너</a></p>        //약식표기법
</div>

<script>
        new Vue({
            el:'#app',
            data:{
                url:'https://namu.wiki/w/도우너',
            }
        });
</script>

이번에는 v-bind: 를 이용한 클래스 지정과, 배열을 이용한 다중 클래스 지정에 관한 예시이다.

<div id="app">
        <p v-bind:class="ok">v-bind로 클래스 지정</p>
        <p v-bind:class="[ok,tit]">배열을 이용한 다중 클래스 지정</p>
        <p v-bind:class="{tit:turn}">데이터로 클래스 ON/OFF</p>
</div>

<script>
        new Vue({
            el:'#app',
            data: {
                ok:'bgyellow',
                tit: 'tit',
                turn: false 
            }
        });
</script>