Vue.js_Form Input Bindings

📚 Vue.js

📚 Vue.js Form Input Bindings

Vue 폼 입력 바인딩 ( Form Input Bindings ) 이란

• v-model directive를 사용하여 폼 input과 textarea element에 양방향 데이터 바인딩을 생성할 수 있다.
  • text와 textarea 태그는 value 속성과 input 이벤트를 사용한다.
  • 체크박스들과 라디오 버튼 들은 checked 속성과 change 이벤트를 사용한다.
  • Select 태그는 value를 prop으로 , change를 이벤트로 사용한다.

form - text, textarea

• 문자열 ( text )

<input v-model="msg" placeholder="여기를 수정하세요">
<p>메세지 : </p>

• 여러줄을 가진 문장 ( textarea )
  • 텍스트 영역의 보간 (<textarea></textarea>)은 작동하지 안ㄹ는다. » v-model를 사용

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

• 실습

<div id="app">
        <div>
             아이디 : <input v-model="id" placeholder="아이디를 입력하세요"> 
            <!-- .lazy 수식어를 추가하여 change 이벤트 이후에 동기화 할 수 있습니다. -->
            <!-- lazy를 사용안하면 한글자씩 작성하는 순간 바로 반영이 되지만, lazy를 사용하면 다 작성하고 반영을 할 수 있다 -->
            <!-- 아이디 : <input v-model.lazy="id" placeholder="아이디를 입력하세요"> -->
        </div>
        <div>
            메세지 : <textarea v-model="msg" placeholder="내용을 입력하세요"></textarea>
        </div>
        <p> 님에게 보내는 메세지 : </p>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                id: '',
                msg: '',
            },
        });
    </script>

• 실행 결과

form - checkbox

• 하나의 체크박스는 단일 boolean 값을 갖는다.

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

• 단일 체크박스 실습

 <div id="app">
        <p>
            이메일 수신
            <input type="checkbox" id="emailYN" v-model="email">
            <label for="emailYN"></label>
        </p>
        <p>
            SMS 수신
            <input type="checkbox" id="smsYN" v-model="sms" true-value="Y" false-value="N"/>
            <label for="smsYN"></label>
        </p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                email: false,
                sms: 'Y',
            }
        });
    </script>

• 실행 결과

• 여러 개의 체크박스는 같은 배열을 바인딩 할 수 있다.

• 배열의 값과 checkbox의 value 속성이 같을 경우 체크 처리됨

• 여러개 체크박스 실습

 <div id="app">
        <div>당신이 가고싶은 지역을 선택하세요 !!</div>
        <input type="checkbox" id="seoul" value="서울" v-model="checkedAreas">
        <label for="seoul">서울</label>
        <input type="checkbox" id="daegu" value="대구" v-model="checkedAreas">
        <label for="daegu">대구</label>
        <input type="checkbox" id="busan" value="부산" v-model="checkedAreas">
        <label for="busan">부산</label>
        <input type="checkbox" id="daejeon" value="대전" v-model="checkedAreas">
        <label for="daejeon">대전</label>
        <br>
        <span>체크한 이름 : </span>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                checkedAreas: [],
            }
        });
    </script>

• 실행 결과

form - radio

• radio의 경우 선택된 항목의 value 속성의 값을 관리

<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>선택: </span>

• 실습

<div id="app">
        <div>수업을 듣는 지역을 선택하시오 </div>
        <div>
            <input type="radio" id="daegu" value="대구" v-model="ckArea">
            <label for="daegu">대구</label>
            <input type="radio" id="seoul" value="서울" v-model="ckArea">
            <label for="seoul">서울</label>
            <input type="radio" id="gumi" value="구미" v-model="ckArea">
            <label for="gumi">구미</label>
            <input type="radio" id="daejeon" value="대전" v-model="ckArea">
            <label for="daejeon">대전</label>
        </div>
        <span>내가 선택한 지역 : </span>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
               ckArea: '대구',
            }
        });
    </script>

• 실행 결과

form - select

• select box일 경우 선택된 항목의 value 속성의 값을 관리
• v-model 표현식의 초기 값이 어떤 옵션에도 없으면, <select> element는 “선택없음” 상태로 렌더링된다.

<select v-model="selectedHobby">
    <option disabled value="">선택</option>
    <option value="공부">공부</option>
    <option value="노래">노래</option>
    <option value="춤">춤</option>
</select>
<span>선택함 : </span>

• 실습

<div id="app">
        <div>수업을 듣는 지역을 선택하시오 </div>
        <select v-model="selectedArea">
            <option value="">선택하세요</option>
            <option value="daegu">대구</option>
            <option value="gumi">구미</option>
            <option value="seoul">서울</option>
            <option value="daejeon">대전</option>
        </select>        
        <span>내가 선택한 지역 : </span>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                selectedArea: '',
            }
        });
    </script>

• 실행 결과

form - 수식어 ( Modifiers )

• .lazy
  • .lazy 수식어를 추가하여 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">