[Hoon] Vuejs 강의 - 폼 입력 바인딩

폼 입력 바인딩

https://kr.vuejs.org/v2/guide/forms.html

기본 사용법

v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있습니다.

# input

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <input v-model="message" placeholder="여기를 수정해보세요">
  <p>메시지: {{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: '안녕하세요!'
  }
})

# textarea

<span>여러 줄을 가지는 메시지:</span>
<p style="white-space: pre-line">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="여러줄을 입력해보세요"></textarea>

# checkbox

v-model은 모든 form 엘리먼트의 초기 value와 checked 그리고 selected 속성을 무시합니다. 항상 Vue 인스턴스 데이터를 원본 소스로 취급합니다. 컴포넌트의 data 옵션 안에 있는 JavaScript에서 초기값을 선언해야합니다.

• text 와 textarea 태그는 value속성과 input이벤트를 사용합니다.
• 체크박스들과 라디오버튼들은 checked 속성과 change 이벤트를 사용합니다.
• Select 태그는 value를 prop으로, change를 이벤트로 사용합니다.

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

new Vue({
  el: '#app',
  data: {
    checked: false
  }
})

<div id='app'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>체크한 이름: {{ checkedNames }}</span>
</div>

new Vue({
  el: '#app',
  data: {
    checkedNames: []
  }
})

# radio

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>선택: {{ picked }}</span>

new Vue({
  el: '#app',
  data: {
    picked: ''
  }
})

# select

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>선택함: {{ selected }}</span>

new Vue({
  el: '#app',
  data: {
    selected: ''
  }
})

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>

v-for를 이용한 동적 옵션 렌더링

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

값 바인딩하기

라디오, 체크박스 및 셀렉트 옵션의 경우, v-model 바인딩 값은 보통 정적인 문자열(또는 체크 박스의 boolean) 입니다.

<!-- `picked` 는 선택시 문자열 "a" 입니다 -->
<input type="radio" v-model="picked" value="a">

<input type="radio" v-model="picked" value="b">

<!-- `toggle` 는 true 또는 false 입니다 -->
<input type="checkbox" v-model="toggle">

<!-- `selected`는 "ABC" 선택시 "abc" 입니다 -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

new Vue({
  el: '#app',
  data: {
  	picked : '',
    toggle: false
  }
})

v-bind를 사용하면 입력 값을 문자열이 아닌 값에 바인딩 할 수도 있습니다.

# checkbox

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

# radio

<input type="radio" v-model="picked" v-bind:value="c">

new Vue({
  el: '#app',
  data: {
  	c: 'c',
  	picked : '',
    toggle: false
  }
})

# select option

<select v-model="selected">
  <!-- inline object literal -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

<p>{{ selected['number'] }}</p>

new Vue({
  el: '#app',
  data: {
    selected: ''
  }
})

수식어

# .lazy

기본적으로, v-model은 각 입력 이벤트 후 입력과 데이터를 동기화 합니다.
.lazy 수식어를 추가하여 change 이벤트 이후에 동기화 할 수 있습니다.

<!-- "input" 대신 "change" 이후에 동기화 됩니다. -->
<input v-model.lazy="msg" >

# .number

사용자 입력이 자동으로 숫자로 형변환 되기를 원하면, v-model이 관리하는 input에 number 수식어를 추가하면 됩니다.

<input v-model.number="age" type="number">

# .trim

v-model이 관리하는 input을 자동으로 trim 하기 원하면, trim 수정자를 추가하면 됩니다.

<input v-model.trim="msg">

new Vue({ el: '#app', data: { msg : 'Hello!', age : 0 } })

bit.ly/3fXOzon

인프런 인강 선착순 30% 마지막 할인 쿠폰 - Vue.js 핵심 강의!

bit.ly/2TtRHis

[Vue.js 입문] 초보 실전 웹앱 개발 - 1부 : vue 개념 ~ 핵심 - 인프런