Vue.js 기초 - 컴포넌트- 데이터바인딩

데이터 바인딩

Vue는 Angular와 마찬가지로 양방향 데이터 바인딩을 지원한다. 양방향 데이터 바인딩이란 모델에서 데이터를 정의한 후 뷰와 연결하면 모델과 뷰 중 어느 한쪽에 변경이 일어났을 때 다른 한쪽에 자동으로 반영되는것을 말한다.

src/views 폴더에 DataBinding.vue 파일을 만들고 다음과 같이 만들자

코드를 보면 <template>에는 중괄호 두개에 title, <script>에는 data() 부분에 title:’World’라는 코드가 있다. data 프로퍼티에 정의된 title이 template의 title에 바인딩이 되는 구조이다. 이렇게 Vue 컴포넌트에서는 data에 정의되는 데이터를 이중 괄호를 이용해서 html에 바인딩 할 수 있다.

정상적으로 반영이 됐는지 확인하기 위해 DataBinding.vue 파일을 라우터에 등록해야 한다. DataBinding.vue파일에 대한 접근이 가능하도록 router/index.js에 다음과 같이 추가한다.

그리고 App.vue 파일을 열어서 다음과 같이 링크를 추가해준다.

서버를 실행하고 로컬 주소로 들어가면 데이터 바인딩 vue가 보인다.

데이터 바인딩 문법

문자열 데이터 바인딩

문자열 데이터 바인딩의 경우에는 이전에 표기한것처럼 이중 중괄호를 이용해서 데이터를 바인딩하면 된다.

raw(원시) HTML 데이터 바인딩

html 태그를 바인딩 할 때는 문자열 바인딩을 할 때 사용한 이중 중괄호를 이용하면 안된다. 이중 중괄호를 이용하면 html태그가 아니라 문자열 즉, 텍스트로 인식한다.

실제 html로 출력되기 위해서는 v-html 디렉티브를 사용해야 한다.

<template>
    <h1></h1>
    <div v-html="htmlString"></div>
</template>
<script>
export default{ 

    data(){
        return{
            htmlString: '<p style="color:red;">This is a red string.</p>'
        };
    }
}
</script>

위 코드처럼 입력하고 npm run serve로 확인하면

위 화면처럼 단순 이중괄호로 넣으면 텍스트만 가져오고 아래처럼 v-html로 가져오면 html로 랜더링 되는것을 확인할 수 있다.

Form 입력 데이터 바인딩

웹 페이지에서 사용자로부터 데이터를 입력받을 수 있는 필드를 Form Element라고 한다. v-model 디렉티브를 사용하여 양방향 데이터 바인딩을 생성할 수 있다. 여기서 주의해야 할 점은 v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송한다는 것이다.

input type = text

사용자로부터 텍스트를 입력받을 수 있는 input의 경우 입력받은 텍스트는 value에 저장이 되게 된다. input type=text에서 v-model은 내부적으로 value 속성을 사용하게 된다. data()에 정의된 데이터 키명을 v-model에 넣어주면 모델인 data와 뷰인 input type=text의 value 속성이 서로 양방향으로 데이터 바인딩 설정된다.

이해?

views에 DataBindingInputText.vue로 vue 파일 하나 만들기

<template>
    <div>
        <input type = "text" v-model="valueModel" />
    </div>
</template>
<script>
    export default{ 

        data(){
            return{
                valueModel:'South Korea'
            };
        }
    }
</script>

위 처럼 코드를 넣고 router에도 설정하고 설정한 주소로 들어가면

위처럼 input에 valueModel 값이 바인딩되어 화면에 나타나는것을 확인할 수 있다.

모델인 data에서 뷰인 input type = text 객체로 단방향으로 데이터가 바인딩 된 것처럼 보이지만, 실제로는 사용자가 input 객체의 텍스트를 직접 입력하여 변경하면 변경된 데이터를 가져오는 별도의 코드 작성 없이 모델인 data의 valueModel에 사용자가 입력한 텍스트가 그대로 저장이 되게 된다.

input type=number

사용자의 입력 값이 문자가 아닌 숫자로 바로 처리할 수 있도록 v-model.number 디렉티브를 사용하면 숫자로 관리된다.

Textarea

textarea의 경우 지금까지 사용했던 것처럼 <textarea>텍스트영역 메시지(이중 중괄호 부분)</textarea>처럼 사용할것 같지만 실제로는 <textarea v-model="message"></textarea>과 같이 사용해야 한다.

<template>
    <div>
        <textarea v-model="message"></textarea>
    </div>
</template>
<script>
export default{ 
    data(){
        return{
            message:"여러 줄을 입력할 수 있는 textarea입니다."
        };
    }
}
</script>

Select

select 객체 역시 input type=text와 동일하게 v-model은 내부적으로 select의 value 속성을 사용해서 양방향 데이터 바인딩을 한다.

<template>
    <div>
        <select v-model="city">
            <option value="02">서울</option>
            <option value="21">부산</option>
            <option value="062">제주</option>
        </select>
    </div>
</template>
<script>
export default{ 

    data(){
        return{
            city:"064"
        };
    }
}
</script>

위와 같은 코드가 있다면 Data 프로퍼티의 city에 064를 할당했다. select 객체에는 v-model로 data에서 정의한 city로 맵핑했다. 이 코드를 실행하면 select 객체의 초기 값이 064로 설정되면서 화면에는 제주가 선택된 상태로 보이게 된다.

체크박스

체크박스의 경우 input type = text, select와 다르게 value 속성이 아닌 v-model은 내부적으로 체크박스의 checked 속성을 사용한다. 그렇기 때문에 value 속성에 데이터 바인딩을 하려면 v-model이 아닌 v-bind:value을 사용해야 한다.

<template>
    <div>
        <textarea v-model="message"></textarea><br>
        <label><input type = "checkbox" v-model="checked">  </label>
    </div>
</template>
<script>
export default{ 
    data(){
        return{
            message:"여러 줄을 입력할 수 있는 textarea입니다.",
            checked:true
        };
    }
}
</script>

위처럼 데이터 바인딩으로 하면 텍스트로 들어가고, v-model의 값이 true로 설정되어야 체크가 됨.

여러 개의 체크박스를 사용할 때는 배열을 이용해서 데이터를 바인딩해서 한번에 처리할 수 있다.

<template>
    <div>
        <label><input type = "checkbox" value="서울" v-model="checked"> 서울</label>
        <label><input type = "checkbox" value="부산" v-model="checked"> 부산</label>
        <label><input type = "checkbox" value="제주" v-model="checked"> 제주</label>
        <br>
        <span>체크한 지역:  </span>
    </div>
</template>
<script>
export default{ 
    data(){
        return{
            checked:[]
        };
    }
}
</script>

위 코드처럼 작성하면 체크박스를 체크하면 배열에 담겨 실시간으로 <span>태그 부분이 바뀐다.