Vue 데이터 바인딩(기본, attribue, 배열, class)

본격적으로 vue에서 데이터 바인딩(결합, 연결)을 어떻게 하는지 예제를 통해 알아보자.

 

목차는 다음과 같다.

  1. 기본 데이터 바인딩

  2. attribute 바인딩

  3. 배열과 json 방식을 이용한 데이터 설정

  4. class 데이터 바인딩

 

1. 기본 데이터 바인딩

HTML

<div id="app">
	<input type="text" id="user_id" v-model="userId"/>
	<input type="password" id="user_password" v-model="userPassword"/>
	<button type="button">로그인</button>
    
    <p>아이디 : {{userId}}</p>
    <p>비밀번호 : {{userPassword}}</p>
</div>

1) vue와 바인딩할 태그에 id를 부여한다. (여기서는 "app")

2) v-model(vue가 제공하는 속성)에 변수 명을 기재한다. => new Vue 인스턴스에 data와 바인딩 된다.

3) {{ }} (콧수염처럼 생겨서 머스타시 라고 불리는 중괄호 세트)에 변수 명을 작성하면, 변수 data 값이 출력된다.

 

※ onchange, onclick함수(change, click될 때마다 이벤트가 일어나도록 하는)를 쓸 필요가 없이,

<v-model>과 new Vue의 data 바인딩만으로 상태변화가 반영되기에 매우 편리하다!!

 

 

JavaScript

<script type="text/javascript">
	new Vue({
		el:'#app',
		data(){
			return{
				userId:'',
				userPassword:''
			}
		}
	})
</script>

**위와는 달리 data( ){ } 메소드 형태를 json 형태로 작성할 수도 있다.

(함수 선언식을 함수라고 부른다. 그러나 json 데이터 내에 data(){} 처럼 함수 형식으로 속해 있는 것을 '메소드'라고 부른다.)

data : {

   message : 'Hello Vue !'

}

(이것은 {{message}}라고 html에 적어준다면, 값이 출력된다.)

 

 

2. attribute binding

<div id="app">
	<img :id=" `thumbnail_${id}` " :src="image"/>
</div>

let app = new Vue({
	el:'#app',
    data(){
    	return{
        	id:1,
        	image:'......'
        }
    }
})

attribute(속성)에 데이터를 사용하고 싶다면 v-bind 또는 콜론과 데이터 변수명을 사용한다.

 

*정식 지시명 : v-bind

v-bind:src = "image"

 

*단축어 : 콜론 사용

: src = "image"

 

*속성값에 <변수>와 <String>을 조합해서 사용하고 싶다면?

=> 달러표기($)와 리터럴(` `) 사용

 

:    = " ` anyName_${id} ` " 

 

**콜론을 붙이면

따옴표 내부 영역은 javascript 영역으로 변환된다.

따라서 데이터를 입력할 수 있을뿐만 아니라 스트링 연산 등의 작업도 가능하다.

 

 

3. 배열과 json방식을 이용한 데이터 설정

<div id="app" >
	<div :style="[style, fontStyle]">
    	테스트용 DIV
    </div>
</div>

<script type="text/javascript">
	new Vue({
		el:'#app',
		data(){
			return{
				id:1,
                image:'.....',
                style: {
                	background:'red'
                },
                fontStyle:{
                	'font-size':'10px',
                    fontFamily : 'dotum'
                }
			}
		}
	})
</script>

 

**json 방식 데이터 입력

: vue instance의 <style>과 <fontStyle> data 변수처럼 string 방식이 아닌 json 방식으로 값을 지정할 수도 있다.

 

**이때 json형식의 value 내에서 key값을 작성하는 방식

: font-size처럼 하이픈이 들어가는 경우,

작은따옴표 안에 넣어주어 string으로 만들어도 되고, (=> 'font-size')

혹은 하이픈 다음 영문을 대문자로 바꿔줘도 된다. (=> fontSize)

 

**여러 개 data를 배열로 입력

div 태그의 style 속성에 <style>, <fontStyle>속성 모두를 적용하고 싶다면?

:style="[style, fontStyle]"와 같이 배열을 이용하면 된다.

 

4. 클래스 데이터 바인딩

*기본

: 데이터 메소드에 <적용할 클래스명>과 <Boolean값>을 적으면 된다.

<div :class="dropdown"></div>

let app = new Vue({
	el:'#app',
    data(){
    	return{
        	id:1,
        	dropdown:{
            	dropdown:true
            }
        }
    }
})

 

 

*배열, 토글 사용

<div :class="[dropdown, toggle]"></div>

let app = new Vue({
	el:'#app',
    data(){
    	return{
        	id:1,
        	dropdown:'dropdown',
            toggle:{
            	on:false
            }
        }
    }
})

 

** 상황에 따라 클래스를 토글 형태로 추가하도록 만들 수 있다.

: 위 코드는 div 클래스 속성으로 'dropdown'은 기본으로 항상 가지고 있도록 하고,

'on' 클래스를 토글 형식으로 상황에 따라 존재했다 삭제했다 할 수 있도록 만든 것이다.

 

if (조건) { app.toggle.on=true; }

else { app.toggle.on=false; }