1. 프로젝트 생성 및 마크업 작업

$ vue create vue-form

$ cd vue-form
$ npm run serve

초기 상태

App.vue

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

마크업 구조 잡기

App.vue

<template>
  <form action="">
    <div>
      <label for="username">id: </label>
      <input id="username" type="text">
    </div>
    <div>
      <label for="password">password: </label>
      <input id="password" type="password">
    </div>
    <button>login</button>
  </form>
</template>

2. v-model 속성과 submit 이벤트 처리

기본적으로 이 형태를 기억해야 한다.

<script>
export default {
  data: function() {
    return {
      
    }
  }
}
</script>

App.vue

<template>
  <form v-on:submit="submitForm"> <!-- 메서드 생성 -->
    <div>
      <label for="username">id: </label>
      <input id="username" type="text" v-model="username">
    </div>
    <div>
      <label for="password">password: </label>
      <input id="password" type="password" v-model="password">
    </div>
    <button type="submit">login</button>
  </form>
</template>

<script>
export default {
  data: function() {
    return {
      username: '',
      password: ''
    }
  },
  methods: { // 메서드 구현
    submitForm: function() {
      console.log(this.username, this.password);
    }
  }
}
</script>

동일하게 연결됨

3. axios를 이용한 데이터 전송 및 form 구현

npm install axios

App.vue

스크립트(script) 태그에 사용하겠다고 선언

import axios from 'axios';

axios사용하기

<script>
import axios from 'axios';

export default {
  data: function() {
    return {
      username: '',
      password: ''
    }
  },
  methods: { // 메서드 구현
    submitForm: function() {
      console.log(this.username, this.password);
      var url = 'https://jsonplaceholder.typicode.com/users';
      //이 url로 데이터를 보내고 받을 수 있음
      var data = {
        username: this.username,
        password: this.password
      }
      axios.post(url, data)
        .then(function(response){
          console.log(response);
        })
        .catch(function(error){
          console.log(error);
        })
    }
  }
}
</script>

※ url은 이 사이트에서 복붙했고 뒤에 todos/1만 원하는 대로 고치면 된다.

'https://jsonplaceholder.typicode.com/todos/1'