사용자 입력 폼 만들기

1. vue-form 프로젝트 생성

1-1. 프로젝트 폴더 만들기

vue create form
cd vue form
npm run seve

1-2. 환경 설정

App.vue 내용 모두 지우기
scf로 기본 형식 자동 불러오기(난 안먹힘...)

2. 실습

<template>
  <form v-on:submit.prevent="submitForm">     <!--자동 새로고침 방지-->
    <div>
      <label id="username">id: </label>
     <input name="username" type="text" v-model="username">     <!-- 이 input에 어떤 값이 입력될 때마다 그 값이 username에 반영됨 -->
    </div>
    <div>
      <label id="password">password: </label>
      <input name="password" type="password" v-model="password">
    </div>
    <button type="submit">login</button>
  </form>
</template>

<script>
import axios from 'axios';

export default {

  data: function() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    submitForm : function() {        //여기서 들어오는 event는 submitForm. 
     // console.log(event);         
      //event.preventDefault();                       //자동으로 실행되는 새로고침 방지
      console.log(this.username, this.password);
      var url='https://jsonplaceholder.typicode.com/users';
      //axios.post(url,this.data);    하면 안되나?
      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>