[Vue.js] Vue CLI를 활용해서 로그인 form 만들기

Vue CLI를 활용해 사용자 입력 폼 (로그인 폼) 만들기

• 기초 강의의 마지막으로 로그인 폼 만들기를 해보았다.
• 이제 vue 개발을 시작할 준비가 되었다~!

// @App.vue

<template>
  <div>
    <form v-on:submit.prevent="submitForm">
      <div>
        <label for="username">id: </label>
        <input id="username" type="text" v-model="username" />
      </div>
      <div>
        <label for="password">pw: </label>
        <input id="password" type="password" v-model="password" />
      </div>
      <button type="submit">login</button>
    </form>
    <h1>hi</h1>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    submitForm() {
      // e.preventDefault();
      console.log(this.username, this.password);
      let url = 'https://jsonplaceholder.typicode.com/users';
      let data = {
        username: this.username,
        password: this.password,
      };
      axios
        .post(url, data)
        .then(response => console.log(response))
        .catch(error => console.log(error));

      this.username = '';
      this.password = '';
    },
  },
};
</script>
<style scoped></style>