폼 입력 바인딩

폼 입력 바인딩을 사용하지 않을때

<div id="app">
<!--  <input :value="msg" @input="msg=$event.target.value">-->
  <input v-bind:value="msg" v-on:input="msg=$event.target.value">
  <h1>{{msg}}</h1>
</div>
</body>
<script>
  const App = {
    data(){
      return {
        msg : ''
      }
    }
  }
  const vm = Vue.createApp(App).mount('#app')
</script>

:value와 @input을 사용하여 msg를 양방향 데이터 바인딩을 다루었다.

• type은 생략시 type="text"로 처리

폼 입력 바인딩 사용

v-model : v-bind와 v-on의 기능의 조합으로 동작
v-bind 속성은 뷰 인스턴스의 데이터 속성을 해당 HTML 요소에 연결할 때 사용한다. (뷰 인스턴스 데이터 속성 -> HTML 요소)
v-on 속성은 해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용한다. (HTML 요소의 이벤트 -> 뷰 인스턴스 로직)

• v-model can only be used on <input>, <textarea> and <select> elements.

type="text"

  <input v-model="msg">

input 부분의 :value와 @input을 사용하지 않고 v-model을 이용하였다.

• 주의 : 한글 반영할때 하나의 글자를 완성되기 전까지 v-model은 적용이 안되어 한글은 :value @input을 이용해야한다.

type="checkbox"

case1)

<div id="app">
  <input type="checkbox" id="checkbox" value="jack"  v-model="checked" />
  <label for="checkbox">{{ checked }}</label>
</div>
</body>
<script>
  const App = {
    data(){
      return {
        checked : ''
      }
    }
  }
  const vm = Vue.createApp(App).mount('#app')
</script>

case2)

<div id="app">
  <input type="checkbox" value="jack" id="checkbox" v-model="checked" />
  <label for="checkbox">{{ checked }}</label>
</div>
</body>
<script>
  const App = {
    data(){
      return {
        checked : []
      }
    }
  }
  const vm = Vue.createApp(App).mount('#app')
</script>

checked가 문자열일 경우 true, false중 하나로 처리하나
checked가 배열일 경우 그에 해당하는 value값이 추가되거나 삭제된다.

• 해당 checkbox에 대한 내용을 보면 if(Array.isArray($$a))를 통해 배열이때에는 value로 적용시키고 그외에는 Boolean으로 처리하는 것을 알 수 있다.

관련 출처

캡틴판교
vue github