Form 입력 데이터 바인딩
- Form Element
- 웹 페이지에서 사용자로부터 데이터를 입력받을 수 있는 필드
- v-model 디렉티브로 양방향 데이터 바인딩 생성 가능
- v-model 은 내부적으로 서로 다운 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송함
input type=text
- 입력받은 텍스트는 value에 저장됨
- input type=text 에서 v-model은 내부적으로 value 속성을 사용함
- data() 에 정의된 데이터 키명을 v-model에 넣어주면 모델와 뷰인 input type=text의 value 속성이 서로 양방향으로 데이터 바인딩 설정됨
- 사용자가 input type=text 객체의 텍스트 입력/변경시 valueModel에 저장된다.
vue-project/src/views/DataBindingInputText.vue
<template>
<div>
<input type="text" v-model="valueModel" />
</div>
</template>
<script>
export default{
data(){
return{
valueModel: 'ha ha ha'
};
},
}
</script>
inupt type=number
vue-project/src/views/DataBindingInputNumber.vue
<template>
<div>
<input type="number" v-model="valueModel" />
</div>
</template>
<script>
export default{
data(){
return{
valueModel: 1000
};
},
}
</script>
textarea
vue-project/src/views/DataBindingTextarea.vue
<template>
<div>
<textarea v-model="message"></textarea>
</div>
</template>
<script>
export default{
data(){
return{
message: '이것은 메시지'
};
},
}
</script>
select
vue-project/src/views/DataBindingSelect.vue
<template>
<div>
<select v-model="city">
<option value="02">서울</option>
<option value="053">대구</option>
<option value="051">부산</option>
</select>
</div>
</template>
<script>
export default{
data(){
return{
city: '02'
};
},
}
</script>
input type=checkbox
- checkbox 는 v-model 이 value 속성이 아닌 checked 속성을 사용해야되서 value 속성에 데이터바인딩을 하려면 v-model이 아닌 v-bind:value 를 사용함
vue-project/src/views/DataBindingCheckbox.vue
<template>
<div>
<lable><input type="checkbox" v-model="checked1">{{ checked1 }}</lable>
<!-- 체크 해제 되었을때 기본값 변경 -->
<lable><input type="checkbox" v-model="checked2" true-value="yes" false-value="no">{{ checked2 }}</lable>
</div>
</template>
<script>
export default{
data(){
return{
checked1: true,
checked2: true
};
},
}
</script>
vue-project/src/views/DataBindingCheckbox2.vue
<!-- 여러개의 체크박스를 사용할때 -->
<template>
<div>
<lable><input type="checkbox" value="서울" v-model="checked"> 서울 </lable>
<lable><input type="checkbox" value="대구" v-model="checked"> 대구 </lable>
<lable><input type="checkbox" value="부산" v-model="checked"> 부산 </lable>
</div>
<br>
<span>체크한 지역: {{ checked }}</span>
</template>
<script>
export default{
data(){
return{
checked: []
};
},
}
</script>
input type=radio
- radio 는 v-model 이 value 속성이 아닌 checked 속성을 사용해야되서 value 속성에 데이터바인딩을 하려면 v-model이 아닌 v-bind:value 를 사용함
vue-project/src/views/DataBindingRadio.vue
<template>
<div>
<lable><input type="radio" v-bind:value="radioValue1" v-model="picked"> 서울 </lable>
<lable><input type="radio" v-bind:value="radioValue2" v-model="picked"> 대구 </lable>
<lable><input type="radio" v-bind:value="radioValue3" v-model="picked"> 부산 </lable>
</div>
<br>
<span>선택한 지역: {{ picked }}</span>
</template>
<script>
export default{
data(){
return{
picked: '',
radioValue1: '서울',
radioValue2: '부산',
radioValue3: '제주',
};
},
}
</script>
속성 (Attribute)
- v-bind: 디렉티브
- value 을 제외한 HTML 객채의 속성에 데이터를 바인딩하기 위해 사용
- v-bind: 디렉티브는 v-bind을 생략하고 : 으로 사용 가능
img 객체의 src
vue-project/src/views/DataBindingAttribue.vue
<template>
<div>
<img v-bind:src="imgSrc" />
</div>
</template>
<script>
export default{
data(){
return{
imgSrc: "https://kr.vuejs.org/images/logo.png"
};
},
}
</script>
button 객체의 disabled
vue-project/src/views/DataBindingButton.vue
<template>
<div>
<input type="text" v-model="textValue" />
<button type="button" v-bind:disabled="textValue==''">Click</button>
</div>
</template>
<script>
export default{
data(){
return{
textValue: '',
};
},
}
</script>
클래스 바인딩
- 클래스 바인딩시 특이점
- class 속성에 클래스명을 입력, 조건에 따라 바인딩할 클래스의 경우 v-bind:css를 이용해서 추가적으로 정의해서 사용할 수 있다.
- 다른 속성의 경우 하나의 속성만을 이용해서 바인딩 해야하지만 클래스의 경우 기본 클래스와 데이터 바인딩 처리를 하는 클래스를 공전해서 사용할 수 있다.
vue-project/src/views/DataBindingClass.vue
<template>
<div class="container" v-bind:class="{'active': isAcitve, 'text-red': hasError}">
Class Binding
</div>
</template>
<script>
export default{
data(){
return{
isAcitve: true,
hasError: false
};
}
}
</script>
<style scoped>
container {
width: 100%;
height: 200px;
}
.active {
background-color: yellow;
font-weight: blod;
}
.text-red {
color:red;
}
</style>
vue-project/src/views/DataBindingClass2.vue
<!-- 배열을 사용해서 클래스 바인딩 가능 -->
<template>
<div class="container" v-bind:class="[activeClass, errorClass]">
Class Binding
</div>
</template>
<script>
export default{
data(){
return{
activeClass: 'active',
errorClass: 'text-red'
};
}
}
</script>
<style scoped>
container {
width: 100%;
height: 200px;
}
.active {
background-color: yellow;
font-weight: blod;
}
.text-red {
color:red;
}
</style>
인라인 스타일 바인딩
- 인라인 스타일의 경우 데이터를 오브젝트로 선언해서 바인딩
<template>
<div v-bind:style="styleObjects">
인라인 스타일 바인딩
</div>
</template>
<script>
export default{
data(){
return{
styleObjects: {
color: 'red',
fontSize: '13px'
}
};
}
}
</script>
리스트 랜더링 (v-for)
- v-for="(item, index) in items" 형식으로 사용
- items는 데이터 배열
- v-for 를 통해 배열을 하나씩 읽어와서 각 아이템을 item으로, 배열의 현재 index를 index로 반환
vue-project/src/views/DataBindingList.vue
<template>
<div>
<table>
<header>
<tr>
<th>제품명</th>
<th>가격</th>
<th>카테고리</th>
<th>배송료</th>
</tr>
</header>
<tbody>
<tr :key="i" v-for="(prodcut, i) in productList">
<td>{{ prodcut.product_name }}</td>
<td>{{ prodcut.price }}</td>
<td>{{ prodcut.category }}</td>
<td>{{ prodcut.delivery_price }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default{
data(){
return{
productList: [
{ "product_name":"AAAA", "price":1000, "category":"A", "delivery_price": 100 },
{ "product_name":"BBBB", "price":2000, "category":"B", "delivery_price": 100 },
{ "product_name":"CCCC", "price":3000, "category":"C", "delivery_price": 100 },
{ "product_name":"DDDD", "price":4000, "category":"D", "delivery_price": 100 },
]
};
},
}
</script>
랜더링 문법 (v-if, v-show)
v-if
<!-- v-else 디렉티브를 사용해서 else if 표현식 사용가능 -->
<h1 v-if="showFlag">showFlag가 true 이면, 현재 블록이 화면에 보인다.</h1>
<h1 v-else>showFlag가 true가 아니면 현재 블록이 보인다.</h1>
vue-project/src/views/RenderingVIf.vue
<template>
<div>
<h1 v-if="type=='A'">A</h1>
<h1 v-else-if="type=='B'">B</h1>
<h1 v-else>ETC</h1>
</div>
</template>
<script>
export default{
data(){
return{
type: 'A'
};
}
}
</script>
v-show
<h1 v-show="showFlag">showFlag가 true 이면, 현재 블록이 화면에 보인다.</h1>
- v-if 와 v-show 의 차이점
- v-if 는 조건에 만족하면 그순간에 html 블록이 생성되고, 조건에 만족하지 않으면 html 블록은 삭제된다.
- v-if 는 실제로 해당 블록 전체를 생성했다 삭제하여 v-show 보다 리소스 사용이 많다.
- v-show 는 조건 만족여부와 관련없이 무조건 html 블록이 생성됨
- 조건 만족시 css의 display를 이용해서 화면에서 보여진다.
- 조건 불만족시 화면에서 숨겨진다.
- html 블록에서 toggle 이 자주 발생하면 v-show 를 사용하고 그렇지 않을 경우 v-if 를 권장
이벤트 처리 (v-on)
- vue 컴포넌트에서 이벤트 처리시 v-on 디렉티브를 사용
- v-on 디렉티브는 심볼 @ 로 사용 가능
클릭 이벤트 (v-on:click)
vue-project/src/views/EventClick.vue
<template>
<div>
<button type="button" @click="addCounter">Add 1</button>
<!-- 함수에 파라미터를 전달하고 싶을 때-->
<button type="button" @click="addCounterNumber(3)">Add 3</button>
<p>This Counter is : {{ counter }}</p>
</div>
</template>
<script>
export default{
data(){
return{
counter: 0
};
},
methods: {
addCounter() {
this.counter = this.counter + 1;
},
addCounterNumber(number) {
this.counter = this.counter + number;
}
}
}
</script>
Change 이벤트
/home/kalva/vue-project/src/views/EventChange.vue
<template>
<div>
<select v-mode="selectedValue" @change="changeSelect">
<option value="서울">서울</option>
<option value="대구">대구</option>
<option value="부산">부산</option>
</select>
</div>
</template>
<script>
export default{
data(){
return{
selectedValue:''
};
},
methods:{
changeSelect() {
alert(this.selectedValue);
}
}
}
</script>
Key 이벤트
- Vue 에서 제공하는 Key 이벤트
- .enter
- .up
- .tab
- .down
- .delete (키보드 Del, Backspace 키)
- .left
- .esc
- .right
- .space
<!-- 엔터키 입력 -->
<input @keyup.enter="submit" />
<!-- Alter + Enter -->
<input @keyup.alt.enter="clear" />
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
computed, watch
- computed, watch 둘다 Vue 인스턴스 내의 정의된 데이터 값에 변경이 일어나는지 감시하고, 변경될 때마다 정의된 함수가 실행됨
computed
vue-project/src/views/Computed.vue
- firstName, lastName 의 값중 하나라도 변경되면 fullName 함수가 자동으로 실행되고 fullName 값이 갱신된다.
- firstName, lastName 의 초기 지정값도 변경으로 인식한다.
<template>
<div>
<h1>Full Name: {{ fullName }}</h1>
</div>
</template>
<script>
export default{
data(){
return{
firstName: 'AAA',
lastName: 'BBB'
};
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
}
</script>
watch
- watch 는 초기에 할당된 값에서 변경이 일어나야 watch 에서 정의한 함수를 실행한다.
- firstName, lastName 의 초기 지정값은 변경으로 인식 안한다.
vue-project/src/views/Watch.vue
<template>
<div>
<h1>Full Name : {{ fullName }}</h1>
<button type="button" @click="changeName">변경</button>
</div>
</template>
<script>
export default{
data(){
return{
firstName: '',
lastName: '',
fullName: ''
};
},
watch: {
firstName() {
this.fullName = this.firstName + ' ' + this.lastName;
},
lastName() {
this.fullName = this.firstName + ' ' + this.lastName;
}
},
methods: {
changeName() {
this.firstName = 'CCC';
}
}
}
</script>
