Vuejs v-model이 무엇일까

Vuejs 정리를 곧 올리겠지만

지금 사용하는 v-model 먼저 업로드

 

 

 

 

 

 

v-model 속성은 Vuejs로 form 요소를 개발할 때 사용한다

** form 예시

<form
  id="app"
  //우리가 vue 컴포넌트로 사용할 수 있는 id
  @submit="checkForm"
  //submit 핸들러
  action="https://vuejs.org/"
  //실제 서버의 어떤 부분을 가르키는 비영구적 url
  method="post"
  // post
>

 

어떤 내용을 submit하도록 할 건지

v-model을 통해 value를 대응시켜 js에서 동작하도록 할 수 있다

 

 

**

post를 해야 한다고 했다. 

post와 get의 차이점에 대해서는 아래 게시글에서 확인하자

https://jiwoolee-space.tistory.com/50

 

 

 

 

 

 

 

 

 

 

우선,

공식문서에 따르면 

v-model을 사용해서 form input과 textarea element에 양방향 데이터 바인딩을 생성할 수 있다고 한다.

 

v-model을 사용하면 input 유형에 따라 element를 업데이트 하는 올바른 방법을 자동으로 선택할 수 있다.

v-model 속성은 v-bind와 v-on의 기능의 조합으로 동작해서

=> 매번 v-bind와 v-on 속성을 다 지정해 주지 않아도 된다

 

 

 

 

 

 

그러니까,

기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 syntax sugar인 것

 

 

 

 

 

 

각각의 필드는 v-model 을 통해 value를 대응시켜 자바스크립트에서 동작하도록 해준다

                   = input field와 연결시킨다는 것

 

예제로 form validation을 확인해보면

<form
  id="app"
  //우리가 vue 컴포넌트로 사용할 수 있는 id
  
  @submit="checkForm"
  //submit 핸들러
  
  action="https://vuejs.org/"
  //실제 서버의 어떤 부분을 가르키는 비영구적 url
  
  method="post"
  //성공적인 전송을 위해 post
>


  <p v-if="errors.length">
  //p는 에러 상태에 따라 보여질 수도, 안 보일 수도
  //form 위에 간단한 에러들의 리스트 렌더링
  // 모든 필드 채워야 submit validation 
    <b>Please correct the following error(s):</b>
    <ul>
      <li v-for="error in errors">{{ error }}</li>
    </ul>
  </p>

  <p>
    <label for="name">Name</label>
    <input
      id="name"
      v-model="name"
      //v-model을 통해 value를 대응시켜 js에서 동작하도록
      type="text"
      name="name"
    >
  </p>

  <p>
    <label for="age">Age</label>
    <input
      id="age"
      v-model="age"
      type="number"
      name="age"
      min="0"
    >
  </p>

  <p>
    <label for="movie">Favorite Movie</label>
    <select
      id="movie"
      v-model="movie"
      name="movie"
    >
      <option>Star Wars</option>
      <option>Vanilla Sky</option>
      <option>Atomic Blonde</option>
    </select>
  </p>

  <p>
    <input
      type="submit"
      value="Submit"
    >
  </p>

</form>

 

 

 

 

 

 

---

동작방법

<input v-bind:value="inputText" v-on:input="AddInput">

new Vue({
  data: {
    inputText: ''
  },
  methods: {
    AddInput: function(event) {
      var newText = event.target.value;
      this.inputText = newText;
    }
  }
})

**

• v-bind 속성은 뷰 인스턴스의 데이터 속성을 해당 HTML 요소에 연결할 때 사용하고
• v-on 속성은 해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용하고
• 사용자 이벤트에 의해 실행된 뷰 메서드(methods) 함수의 첫 번째 인자에는 해당 이벤트(event)가 들어온다는 걸 알아두자

 

 

 

 

 

 

v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송한다

예를 들어,

• text와 textarea 태그는 value 속성과 input 이벤트를 사용하고
• checkbox와 라디오버튼 같은 건 checked 속성과 changed 이벤트를 사용하고
• select 태그는 value를 prop으로, change를 이벤트로 사용한다는 거다

 

 

 

 

 

 

 

 

 

 

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

폼 입력 바인딩 — Vue.js

https://kr.vuejs.org/v2/cookbook/form-validation.html

Form Validation — Vue.js