Vue.js 시작하기 12. 사용자 입력 폼 만들기

이번에는 

$ vue create vue-form 

 $ cd vue-form
 $ npm run serve

명령어를 통해 vue-form 패키지를 만들고 작업을 해주었다.

 

 

새로 작성한 App.vue 소스는 다음과 같다.

 

// App.vue

<template>
   <form v-on:submit="submitForm"> <!-- #1. login버튼의 type dl submit이기 떄문에 해당 이벤트를 form 태그에서 v-on으로 처리해준다.-->
       <div>
         <label for="username">id: </label>
         <input id="username" type="text" v-model="username">  
         <!-- #2. 화면에서 입력받은 변수를  v-model로 받아와 two-way binding이 가능해짐 -->
       </div>
       <div>
         <lable for="password">pw: </lable>
         <input id="password" type="password" v-model="password">
       </div>
       <button type="submit">login</button>
   </form>
</template>

<script>
export default {
  data : function(){ // #3. 다시한번 컴포넌트 통신 시 서로 변수를 참조하는 경우를 막기 위해서, data를 return하는 함수형 변수로 선언한다.
    return  {
      username : '',
      password : ''
    }  
  }, 
  methods : { // #4. form tag에 정의된 submitForm 함수
    // submitForm : function () {
    //   console.log('username' + this.username);
    //   console.log('password' + this.password);
    // }
  
          // #5. 4번처럼 함수를 선언해주면 매번 새로고침이 되면서 console이 찍혔다가 날라간다.
        submitForm : function (event) {
          event.preventDefault();
          console.log('username' + this.username);
          console.log('password' + this.password);
        }

  }

}
</script>
<style>
</style>

 

 

여기서 추가적으로 event.preventDefault() 는 기본적으로 과거 자바스크립트에서 사용되었던 문법이고,

Vue에서는 form 태그의 submit 속성값으로 prevent를 넣어줄 수 있다.

 

// event.preventDefault()를 주석처리     
      submitForm : function () {
          //event.preventDefault();
          console.log('username' + this.username);
          console.log('password' + this.password);
        }

 <!-- form v-on:submit 뒤에 prevent 속성을 넣어준다. -->
  <form v-on:submit.prevent="submitForm"> <!-- #1. login버튼의 type dl submit이기 떄문에 해당 이벤트를 form 태그에서 v-on으로 처리해준다.-->
       <div>
         <label for="username">id: </label>
         <input id="username" type="text" v-model="username">  
         <!-- 화면에서 입력받은 변수를  v-model로 받아와 two-way binding이 가능해짐 -->
       </div>
       <div>
         <lable for="password">pw: </lable>
         <input id="password" type="password" v-model="password">
       </div>
       <button type="submit">login</button>
   </form>

 

 

 

 

 

여기까지 했으면 axios를 이용해서 데이터 전송 및 form을 구현해보자.

 

우선 

$npm i axios

명령어를 실행하여 npm 에서 제공하는 axios 라이브러리를 다운로드 받는다.

 

 

 

그리고 methods 부분을 아래와 같이 수정한다.

  methods : { 
        submitForm : function () {
          var url = 'https://jsonplaceholder.typicode.com/users'; //#1. url 선언
          var data = { // #2. 데이터 선언
            username :  this.username,
            password : this.password
          } 
          axios.post(url, data) // #.3 axios로 데이터를 서버에 넘길때 
          .then(function(response){ //# 4.promise 문법으로 콜백처리
            console.log(response);
          }).catch(function(err){
            console.log(err);
          });
        }

  }

 

 

 

그러면 아래의 그림과 같이 로그인 버튼을 눌렀을 때 네트워크 창과 콘솔에 header, response 값이 잘 찍혔음을 확인할 수 있다.

 

 

 

 

해당 포스팅은 인프런의 Vue.js 시작하기 - Age of Vue.js 학습 후 정리한 내용임을 알려드립니다.