태태개발일지 - vuejs

프로젝트 단축키

 

관리자 권한으로 VisualStudio 실행.

sudo /Applications/Visual\ Studio\ Code.app/Contents/MacOS/Electron

 

 

명령어를 통해서 프로젝트 생성.

create vue3-cli

 

 

vbc : 기본 형식을 맞춰주는 단축키(아래 참조)

 

Vue의 기본구조

템플릿

스크립트

스타일

 

 

vda: 데이터받아오기

 

 

결론 코드:

<template>
  <form action="" @submit.prevent="submitForm">
    <div>
      <label for="userId">ID: </label>
      <input id="userId" type="text" v-model="userId">
    </div>
    <div>
      <label for="password">PW: </label>
      <input id="password" type="text" v-model="userPassword">
    </div>
    <button type="submit">Submit</button>
  </form>
 
</template>

<script>
// import AppHeader from './components/AppHeader.vue'
import axios from 'axios'
export default {
  components: {
  },
  data() {
    return {
      userId: '',
      userPassword: ''
    }
  },methods:{
    submitForm(){
      const data = {
        username : this.userId,
        userPassword :this.userPassword,
      }
      axios.post('https://jsonplaceholder.typicode.com/users', data)
      .then(response => {
        console.log(response)
      });

    }
  }
}
</script>

<style scoped>
</style>