Vue.js 사용자 입력 폼 만들기

Inseok Park·2022년 6월 29일
0

Vue Lv1

목록 보기
11/11
post-thumbnail

사용자 입력 폼 만들기

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

터미널에서 신규 vue cli 프로젝트를 생성한다.
vue create vue-form
cd vue-form
form에 기본적인 로그인 구조를 마크업 (id/password, button)

App.vue

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

<script>
export default {

}
</script>

<style>

</style>

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

input에 v-model="인스턴스의 데이터 이름"을 추가해서 양방향으로 반응성을 가지게 적용
form 태그에 메서드와 prevent 작성 <form v-on:submit.prevent="submitForm">
인스턴스의 메서드에 submitForm을 추가 후 console.log(this.username, this.password);
submit 버튼을 누르면 입력한 id와 pw 정보가 콘솔에 남는다.
App.vue

<template>
  <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>
</template>

<script>
export default {
  data: function() {
  	// 빈 문자열 데이터 init
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    submitForm: function() {
      // event.preventDefault(); 위 form태그에 event Modifiers로 적용(.prevent)
      console.log(this.username, this.password);
    }
  }
}
</script>

<style>

</style>

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

터미널에서 ctrl+c로 로컬서버 종료 후
npm i axios 로 axios 설치
다시 vue-form폴더에서 npm run serve 입력 후 localhost:8080 브라우저 열기
import axios from 'axios'로 axios api를 가져온 다음
url, data를 변수에 담아 axios.post(url, data)에 인자로 담아 콘솔을 출력한다.

<template>
  <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>
</template>

<script>
import axios from 'axios';

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

<style>

</style>

id와 pw에 test/1234를 입력 후 로그인 버튼을 누르면 data를 확인할 수 있다.
또한 네트워크 Fetch탭을 가면 비동기통신으로 받아온 데이터의 다양한 정보를 확인할 수 있다.

Vue.js의 기초강의를 완강했다.
Vue의 기초적인 문법과 data와 화면이 어떻게 통신하는지 간략하게 볼 수 있어서 좋았다.

0개의 댓글