12. 최종 프로젝트 - 사용자 입력 폼 만들기

모든 예제 코드는 github에 있습니다.

12. 최종 프로젝트 - 사용자 입력 폼 만들기

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

• vue create 프로젝트 폴더 이름
  • vue create vue-form
• 기본적인 마크업 및 컴포넌트 분리
• UserNameInput.vue

<template>
  <div>
    <label for="username">id : </label>
    <input id="username" type="text" />
  </div>
</template>

<script>
export default {};
</script>

<style></style>

• PasswordInput.vue

<template>
  <div>
    <label for="password">pw : </label>
    <input id="password" type="password" />
  </div>
</template>

<script>
export default {};
</script>

<style></style>

• LoginForm.vue

<template>
  <form>
    <user-name-input></user-name-input>
    <password-input></password-input>
    <button>login</button>
  </form>
</template>

<script>
import userNameInput from "./UserNameInput";
import passwordInput from "./PasswordInput";
export default {
  components: {
    "user-name-input": userNameInput,
    "password-input": passwordInput,
  },
};
</script>

<style></style>

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

• 이벤트 버블링과 캡쳐링 블로그 글
• v-model을 사용하면 데이터와 바인딩이 된다.
• submit은 기본적으로 전송 한후에 새로고침을 한다. 그걸 막기 위해 event를 인자로 받아 event.preventDefault()를 한다.
• UserNameInput.vue

<template>
  <div>
    <label for="username">id : </label>
    <input v-model="username" id="username" type="text" />
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      username: "",
    };
  },
};
</script>

<style></style>

• PasswordInput.vue

<template>
  <div>
    <label for="password">pw : </label>
    <input v-model="password" id="password" type="password" />
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      password: "",
    };
  },
};
</script>

<style></style>

• LoginForm.vue

<template>
<div>
  <form v-on:submit.prevent="login">
    <user-name-input></user-name-input>
    <password-input></password-input>
    <button type="submit">login</button>
  </form>
</div>
</template>

<script>
import userNameInput from "./UserNameInput";
import passwordInput from "./PasswordInput";
export default {
  components: {
    "user-name-input": userNameInput,
    "password-input": passwordInput,
  },
  methods:{
      login:function(){

      }
  }
};
</script>

<style></style>

하위 컴포넌트의 데이터를 상위 컴포넌트에게 전달

• UserNameInput.vue

<template>
  <div>
    <label for="username">id : </label>
    <input v-on:keyup="setUserName" v-model="username" id="username" type="text" />
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      username: "",
    };
  },
  methods:{
      setUserName:function(){
          this.$emit('pass', this.username)
      }
  }
};
</script>

<style></style>

• PasswordInput.vue

<template>
  <div>
    <label for="password">pw : </label>
    <input
      v-on:keyup.prevent="getPassword"
      v-model="password"
      id="password"
      type="password"
    />
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      password: "",
    };
  },
  methods: {
    getPassword: function() {
      this.$emit('pass', this.password);
    },
  },
};
</script>

<style></style>

• LoginForm.vue

<template>
  <div>
    <form v-on:submit.prevent="login">
      <user-name-input v-on:pass="setUserName"></user-name-input>
      <password-input v-on:pass="setPassword"></password-input>
      <button type="submit">login</button>
    </form>
  </div>
</template>

<script>
import userNameInput from "./UserNameInput";
import passwordInput from "./PasswordInput";
export default {
  components: {
    "user-name-input": userNameInput,
    "password-input": passwordInput,
  },
  data: function() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    setUserName: function(username) {
      this.username = username;
    },
    setPassword: function(password) {
      this.password = password;
    },
    login: function() {},
  },
};
</script>

<style></style>

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

• npm i 라이브러리명 을 입력하면 라이브러를 설치 할 수 있다.
• axios 설치

npm i axios

• 로그인 요청를 axios로 보내기

<template>
  <div>
    <form v-on:submit.prevent="login">
      <user-name-input v-on:pass="setUserName"></user-name-input>
      <password-input v-on:pass="setPassword"></password-input>
      <button type="submit">login</button>
    </form>
  </div>
</template>

<script>
import userNameInput from "./UserNameInput";
import passwordInput from "./PasswordInput";
import axios from "axios";

export default {
  components: {
    "user-name-input": userNameInput,
    "password-input": passwordInput,
  },
  data: function() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    setUserName: function(username) {
      this.username = username;
    },
    setPassword: function(password) {
      this.password = password;
    },
    login: function() {
      const url = "https://jsonplaceholder.typicode.com/users";
      const data = {
        username: this.username,
        password: this.password,
      };
      axios
        .post(url, data)
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style></style>

• 결과