[Vue.js] 데이터 바인딩 - 텍스트, 속성

● 객체와 배열 내부의 요소 출력

 - 루트에 정의한 속성뿐만 아니라, 객체 내부의 속성과 배열의 요소도 지정할 수 있음

 

<div id="app">
        <!-- 여기 #app 내부에 템플릿을 출력할 것입니다 -->
      <p>{{ message.value }}</p>
      <p>{{ message.value.length }}</p>
      <p>{{ list[2] }}</p>
      <p>{{ list[num] }}</p>  <!-- 속성을 조합해서 사용하기 -->
</div>

 

 

var app = new Vue({ 
    el: '#app', 
    data: {
        //객체 데이터
        message: {
            value: 'Hello Vue.js!'
        },
        //배열 데이터
        list: ['사과', '바나나', '딸기'],
        //다른 데이터를 사용해서 list에서 값을 추출하기 위한 요소
        num:1
    }
})

 

 

렌더링 결과

 

●  표현식과 문장의 차이 주의 

 * Mustache : 별도의 태그를 사용할 필요 없이 중괄호를 사용하기만 하면, 해당 위치에 텍스트 데이터가 출력됨

 -> Mustache 에도 자바스크립트 표현식 작성이 가능함

  <p>{{ 1 + 1 }}</p>

          => 출력 : 2 

 

위의 코드처럼 식이 아니라 문장을 입력해서는 안됨 

 <p>{{ var a = message }}</p>

         => error

         => 오른쪽(message) 대입하는 값 부분이 표현식임

 

● 속성데이터 바인딩

 *Mustache는 텍스트 콘텐츠 기법으로, 속성으로 사용할 때는 적용불가함

 

<input type="text" value="{{ message }}">

        =>error

* 속성에 바인딩하려면 v-bind 디렉티브 사용

 

 <div id="app">
        <!-- 여기 #app 내부에 템플릿을 출력할 것입니다 -->
      <input type="text" v-bind:value="message">
</div>

var app = new Vue({ 
    el: '#app', 
    data: {
        message: 'Hello Vue.js!'
    }
})

*v-bind 생략가능 

<input type="text" :value="message">

 

● v-bind 장식자

장식자	의미
.prop	속성 대신에 DOM속성으로 바인딩함
.camel	케밥케이스 속성 이름을 카멜 케이스로 변환함
.sync	양방 바인딩

 

 

 

● 클릭 카운터 만들기

<div id="app">
        <!-- count 속성 출력하기 -->
        <p>{{ count }}번 클릭했습니다.</p>
        <!-- increment 메서드 호출 -->
        <button v-on:click="increment">카운트하기</button>
</div>

 

var app = new Vue({ 
    el: '#app', 
    data: {
        count: 0
    },
    methods:{
        //버튼을 클릭할 때의 핸들러
        increment : function(){
            this.count += 1 //다시 할당하는 처리만함
        }
    }
    
})

 

 

● 클래스와 스타일 데이터 바인딩 

클래스, 스타일 속성에 데이터를 바인딩할 때도 객체 또는 배열에 지정하면됨

클래스 이름에 하이픈을 넣고 싶은 경우에는 ' 로 감싸서 작성해야함

 <div id="app">
        <p v-bind:class="{ child:isChild, 'is-active':isActive }">Text</p>
        <p v-bind:style="{ color:textColor, backgroundColor:bgColor }">Text</p>
</div>

 

var app = new Vue({ 
    el: '#app', 
    data: {
        isChild: true,
        isActive: true,
        textColor: 'red',
        bgColor: 'lightgray'
    }
    
})

 

 

실제렌더링결과 HTML

<p class="child is-active">Text</p>
<p style="color:red; backgroundColor:lightgray">Text</p>

* 객체 데이터 전달하기 

 - 템플릿에 여러 개의 클래스 또는 스타일을 모두 적으면 코드의 가독성이 떨어짐.

     따라서 data 객체에 객체를 정의한 뒤 전달하는 것이 코드가 깔끔하다. 

<p v-bind:class="classObject">Text</p>
<p v-bind:style="styleObject">Text</p>

 

var app = new Vue({ 
    el: '#app', 
    data: {
        classObject:{
            isChild: true,
            'is-active': true
        },
        styleObject:{
            color: 'red',
            backgroundColor: 'lightgray'
        }
    }
})

 

 

 

●여러 개의 속성 데이터 바인딩하기

 - 각각의 속성을 바인딩하면 가독성이 떨어짐 

var app = new Vue({ 
    el: '#app', 
    data: {
        item: {
            id: 1,
            src: 'image1.jpg',
            alt: '썸네일',
            width: 200,
            height: 200
        }
    }
})

 

 

가독성이 떨어지는 바인딩 ▼

<div id="app">
        <img v-bind:src="item.src"
             v-bind:alt="item.alt"
             v-bind:width="item.width"
             v-bind:height="item.height">
</div>

 

 

좋은 예 ▼ (v-bind 디렉티브의 매개변수 부분 생략하고 객체를 전달하면 한 번에 바인딩가능)

<img v-bind="item">

 

특정 요소만을 따로 지정할 수도 있음 

<img v-bind="item" v-bind:id="'thumb-' + item.id">