고정 헤더 영역
상세 컨텐츠
본문
728x90
반응형
바인딩(binding)이란?
프로그램에 기본단위에서(예:변수) 해당기본단위가 가질수 있는 속성중에서 일부 필요한 속성만을 선택하여 연결해 주는 것.
양방향바인딩(Data two way binding)이란?
사용자의 입력값이 곧바로 코드 상의 변수에 바인딩 되는 것.
예제: stack overflow에 질문을 작성할때, 바로아래 미리보기로 내가 작성한 텍스트가 나타난다.
이를 구현해보자.
1. data에 text 라는 변수를 만들어준다.
data:{
number: 0, //기본값
text: 'text'
},2. data의 text를 중괄호 열고 받아오기
<div id="app">
<form >
<input type="text" :value="text"><br/>
{{text}} <br/>
<button type="submit">제출하기</button>
</form>3. input의 값을 변경할 때마다 실시간으로 렌더링되게 하기 > keyup이벤트 사용
※v-on: 은 @로 대체가 가능하다.
keyup으로 텍스트를 업데이트 시켜주는 함수연결.
<body>
<div id="app">
<form >
<input type="text" :value="text" @keyup="updateText"><br/>
{{text}} <br/>
<button type="submit">제출하기</button>
</form>
</div>
<script>
new Vue({
el:'#app',
data:{
number: 0, //기본값
text: 'text'
},
methods :{
updateText(event){
console.log(event);
}
}
})
</script>
</body>event를 콘솔에 찍어서 출력된값 확인해보자
작성한 값은 event.target.value에 들어있으니. text의 값을 event.target.value로 바꿔준다.
<body>
<div id="app">
<form >
<input type="text" :value="text" @keyup="updateText"><br/>
{{text}} <br/>
<button type="submit">제출하기</button>
</form>
</div>
<script>
new Vue({
el:'#app',
data:{
number: 0, //기본값
text: 'text'
},
methods :{
updateText(event){
this.text = event.target.value;
}
}
})
</script>
</body>
이코드를 바뀌는 값을 양방향바인딩(v-model)을 이용해 바꿔보자.
input에 v-model="변수명" 을 써준다.
<body>
<div id="app">
<form >
<input type="text" v-model="text"><br/>
{{text}} <br/>
<button type="submit">제출하기</button>
</form>
</div>
<script>
new Vue({
el:'#app',
data:{
number: 0, //기본값
text: 'text'
},
methods :{
}
})
</script>
</body>input에 :value로 값을 바인딩하지 않고, @keyup도 없지만, 동일하게 작동한다.
728x90
반응형
'Vue' 카테고리의 다른 글
| Vue 6 - 클래스 & 스타일 바인딩 (0) | 2022.07.12 |
|---|---|
| Vue 5 - Computed 속성과 Watch속성 (0) | 2022.07.12 |
| Vue 3- 이벤트(events) (0) | 2022.07.12 |
| Vue 2- 데이터 바인딩(data Binding) (0) | 2022.07.12 |
| Vue 1 - data와 methods (0) | 2022.07.12 |
