Guide
Essentials
- 설치방법
- 시작하기
- Vue 인스턴스
- 템플릿 문법
- 계산된 속성과 감시자
- 클래스와 스타일 바인딩
- 조건부 렌더링
- 리스트 렌더링
- 이벤트 핸들링
- 폼 입력 바인딩
- 컴포넌트
Transitions & Animation
- 진입/진출 그리고 리스트 트랜지션
- 트렌지션 상태
Reusability & Composition
- 믹스인
- 사용자 지정 디렉티브
- Render Functions & JSX
- 플러그인
- 필터
Tooling
- 프로덕션 배포 팁
- 싱글 파일 컴포넌트
- 단위 테스팅
- TypeScript 지원
Scaling Up
- 라우팅
- 상태 관리
- 서버사이드 렌더링
Internals
- 반응형에 대해 깊이 알아보기
Migrating
- Vue 1.x에서 마이그레이션
- Vue Router 0.7.x으로 부터 마이그레이션
- Vuex 0.6.x에서 1.0로 마이그레이션
Meta
- 다른 프레임워크와의 비교
- Vue.js 커뮤니티에 참여하세요!
- 팀 구성원 만나기
폼 입력 바인딩
기본 사용법
v-model
디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있습니다. 입력 유형에 따라 엘리먼트를 업데이트 하는 올바른 방법을 자동으로 선택합니다. 약간 이상하지만 v-model
은 기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 “syntax sugar”이며 일부 경우에 특별한 주의를 해야합니다.
v-model
은 모든 form 엘리먼트의 초기 value
와 checked
그리고 selected
속성을 무시합니다. 항상 Vue 인스턴스 데이터를 원본 소스로 취급합니다. 컴포넌트의 data
옵션 안에 있는 JavaScript에서 초기값을 선언해야합니다.
IME (중국어, 일본어, 한국어 등)가 필요한 언어의 경우 IME 중 v-model
이 업데이트 되지 않습니다. 이러한 업데이트를 처리하려면 input
이벤트를 대신 사용하십시오.
문자열
<input v-model="message" placeholder="여기를 수정해보세요"> |
메시지: {{ message }}
여러줄을 가진 문장
<span>여러 줄을 가지는 메시지:</span> |
{{ message }}
텍스트 영역의 보간 (<textarea>{{ text }}</textarea>
)은 작동하지 않습니다. 대신 v-model
를 사용하십시오.
체크박스
하나의 체크박스는 단일 boolean 값을 가집니다.
<input type="checkbox" id="checkbox" v-model="checked"> |
여러개의 체크박스는 같은 배열을 바인딩 할 수 있습니다
<div id='example-3'> |
new Vue({ |
체크한 이름: {{ checkedNames }}
라디오
<input type="radio" id="one" value="One" v-model="picked"> |
Picked: {{ picked }}
셀렉트
하나의 셀렉트
<select v-model="selected"> |
new Vue({ |
v-model
표현식의 초기 값이 어떤 옵션에도 없으면, <select>
엘리먼트는 “선택없음” 상태로 렌더링됩니다. iOS에서는 이 경우 변경 이벤트가 발생하지 않아 사용자가 첫 번째 항목을 선택할 수 없게됩니다. 따라서 위 예제처럼 사용하지 않는 옵션에 빈 값을 넣는 것이 좋습니다.
다중 셀렉트 (배열을 바인딩 합니다):
<select v-model="selected" multiple> |
Selected: {{ selected }}
v-for
를 이용한 동적 옵션 렌더링
<select v-model="selected"> |
new Vue({ |
값 바인딩하기
라디오, 체크박스 및 셀렉트 옵션의 경우, v-model
바인딩 값은 보통 정적인 문자열(또는 체크 박스의 boolean) 입니다.
<!-- `picked` 는 선택시 문자열 "a" 입니다 --> |
그러나 때로 값을 Vue 인스턴스에 동적 속성에 바인딩 해야할 수 있습니다. v-bind
를 사용할 수 있습니다. v-bind
를 사용하면 입력 값을 문자열이 아닌 값에 바인딩 할 수도 있습니다.
체크박스
<input |
// 체크된 경우 |
true-value
와 false-value
속성은 폼 전송시 체크되지 않은 박스를 포함하지 않기 때문에 입력의 value
속성에 영향을 미치지 않습니다. 두 값 중 하나가 폼을 통해 전송 되려면 (예 : ‘예’ 또는 ‘아니요’) 라디오를 대신 사용하십시오.
라디오
<input type="radio" v-model="pick" v-bind:value="a"> |
// 체크 하면: |
셀렉트 옵션
<select v-model="selected"> |
// 선택 하면: |
수식어
.lazy
기본적으로, v-model
은 각 입력 이벤트 후 입력과 데이터를 동기화 합니다. (단 앞에서 설명한 IME 구성은 제외됩니다.) .lazy
수식어를 추가하여 change
이벤트 이후에 동기화 할 수 있습니다.
<!-- "input" 대신 "change" 이후에 동기화 됩니다. --> |
.number
사용자 입력이 자동으로 숫자로 형변환 되기를 원하면, v-model
이 관리하는 input에 number
수식어를 추가하면 됩니다.
<input v-model.number="age" type="number"> |
type="number"
를 사용하는 경우에도 HTML 입력 엘리먼트의 값은 항상 문자열을 반환하기 때문에 이것은 종종 유용하게 사용할 수 있습니다.
.trim
v-model
이 관리하는 input을 자동으로 trim 하기 원하면, trim
수정자를 추가하면 됩니다.
<input v-model.trim="msg"> |
v-model
과 컴포넌트
Vue의 컴포넌트에 익숙하지 않으면 지금은 보지 않아도 괜찮습니다.
HTML의 기본 제공 input 유형이 항상 사용자의 요구를 만족시킬 수는 없습니다. 다행히 Vue 컴포넌트를 사용하면 완전히 사용자 정의 된 동작으로 재사용 가능한 input을 만들 수 있습니다. 이 input은 v-model
에도 작동합니다! 자세한 컴포넌트 가이드의 사용자 정의 입력을 참조하십시오.