vue-form 이라는 새로운 프로젝트를 생성해 실습을 진행한다.

• 실행중인 서버 종료: ctrl + C
• vue-form 이라는 이름의 뷰 프로젝트 생성: vue create vue-form
• vue-form 폴더로 이동: cd vue-form
• 서버 구동: npm run serve
• app.vue 내용 삭제
• vue + tab 으로 새로운 템플릿 생성
• components/HelloWorld.vue 파일 제거

submit 버튼을 누르면 form이 새로고침 되어버린다. 어떤 정보를 제출하고 다음 화면으로 넘어가기 때문인데 일반적으로 form의 새로고침을 막는 방법은 아래와 같다.

methods: {
  submitForm: function(event) {
    event.preventDefault();
    console.log(this.username, this.password);
  }
}

event.preventDefault(); 는 일반적인 자바스크립트에서 폼을 제어하는 방법이다. vue에서는 템플릿에 아래와 같이 작성해주면 위 코드와 동일한 동작을 한다

<form v-on:submit.prevent="submitForm">
  ...
</form>

• axios 인스톨: npm i axios

<aside> ✏️ 이 이후에는 내가 뭘 했는지 모르겠다...var url = "https://jsonplaceholder.typicode.com/users"; url 이라는 변수에 뭔가 주소를 입력하고 data 라는 변수도 선언하고, axios 라는 메소드로 .post, .then, .catch 이런걸 막 작성했다. 🤯 혼돈의 도가니탕

</aside>