[vue.js] 사용자 입력 폼 만들기[메인 튜토리얼]

# 사전 준비 사항

npm install @vue/cli

# 프로젝트 생성하기

vue create vue-form : vue-form이라는 vue 프로젝트를 생성합니다.(기본적으로 필요한 npm 라이브러리가 자동 설치)

cd vue-form

npm run serve : vue project를 실행 합니다.

npm i axios --save : http 모듈 사용하기 위해, 설치합니다.

# App.vue 수정

1. App.vue 초기화

- App.vue 내용 전부 제거

- VS Code 상에서, 'vue' 명령어 입력해서, 기본 템플릿 생성 : vueex라는 extention이 설치되어 있어야 할 듯

2. 기본 template 정의

<template>

  <form>

    <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 type="submit">login</button>

  </form>

</template>

3. 기본 component 옵션 정의 및 View Mapping

<script>

import axios from 'axios';

export default {

  data: function() {

    return {

      username: '',

      password: '',

    }

  },

...

}

</script>

<template>

  <form>

...

      <input id="username" type="text" v-model="username"> // v-model="데이터 변수명"

...

      <input id="password" type="password" v-model="password"> // v-model="데이터 변수명"

...

    <button type="submit">login</button>

  </form>

</template>

4. component 이벤트 지정 및 axios 활용 예제

<template>

  <form v-on:submit.prevent="submitForm"> //.prevent를 붙이면, event.preventDefault();와 동일한 역할

//v-on:<이벤트명>="메소드명"

...

    <button type="submit">login</button> //type="submit"

  </form>

</template>

<script>

import axios from 'axios'; // axios import 하여 사용

export default {

  ...

  methods: {

    submitForm: function() {

      // event.preventDefault();

// data.username, data.password

      console.log(this.username, this.password);

      var url = 'https://jsonplaceholder.typicode.com/users';

      var data = {

        username: this.username,

        password: this.password

      }

      axios.post(url, data) // http post 요청

        .then(function(response) {

          console.log(response);

        })

        .catch(function(error) {

          console.log(error);

        });

    }

  }

}

</script>

5. 최종 결과

<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);

      var url = 'https://jsonplaceholder.typicode.com/users';

      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>

<style>

</style>

# 기본 Vue.js 정리

- Reactivity : 데이터 변화를 vue에서 감지하여, view에 반영해주는 vue의 핵심 개념

- 인스턴스

- 컴포넌트 : 화면 영역을 나누어서 개발하는 방식, 하나의 단위

- 컴포넌트 통신

  - props(부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하는 방식)

  - event emit(자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하는 방식)

- HTTP 통신 라이브러리(axios)

- 템플릿 문법(JS 최신?)

  - 데이터 바인딩 {{}}

  - 뷰 디렉티브 (v-)

- Vue CLI

- 싱글 파일 컴포넌트(.vue)

# 공식문서

vuejs.org 참조

- api 

- style guide

- cookbook : 실용적인 고민

- vueEx

- vue router