터미널에서 신규 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>
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>
터미널에서 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와 화면이 어떻게 통신하는지 간략하게 볼 수 있어서 좋았다.